Многострочное многоточие с метками <br> добавляет только эллипсис к первой строке в IE11/Edge

Question

В Chrome и Firefox обе строки показывают эллипсис в конце. Однако в IE11/Edge только первая строка имеет многоточие, а вторая строка просто обрезается. Есть ли способ заставить IE11/Edge работать подобно 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

Для тех, кто в той же ситуации, я нашел, что единственный способ получить эту работу, чтобы изменить HTML немного, так что каждая строка в DIV обернута в своем собственном div - и те дочерние divs получают css для добавления многоточия.

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>