Multiline ellipsis with <br> tags only adds ellipsis to first line in IE11/Edge

Question

In Chrome and Firefox both lines show an ellipsis at the end. However in IE11/Edge only the first line has an ellipsis and the second line is simply cutoff. Is there anyway to get IE11/Edge to work similar to Chrome/Firefox?

body {
  font-family: 'Arial';
}

div.wrapped-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100px;
}

<div class="wrapped-text">
This is a test of wrapped<br>
text that should overflow
</div>

Answer 1

For anyone in the same situation I've found the only way to get this to work is to change the HTML a little so that each line in the div is wrapped in its own div - and those child divs get the css to add the ellipsis.

body {
  font-family: 'Arial';
}

div.wrapped-text {
  width: 100px;
}
div.wrapped-text > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<div class="wrapped-text">
  <div>This is a test of wrapped</div>
  <div>text that should overflow</div>
</div>