При определенных ширинах мои эллипсы обрезаются. Я создал скрипку, демонстрирующую ее. Я пробовал разные комбинации полей и отступов, но не могу их исключить. Я использую Chrome 51.
Примечание. Я упростил свой пример для краткости. Мой фактический div является отзывчивым, а текст динамическим. Мне нужно решение, которое будет работать для любого текста любой ширины.
Есть ли способ обойти эту проблему?
<div class="container">
<div class="nowrap">This text should be truncated</div>
</div>
<div class="container two">
<div class="nowrap">This text should be truncated</div>
</div>
.container{
width:196px;
font-size:30px;
}
.container.two{
width:193px;
}
.nowrap{
text-overflow: ellipsis;
white-space:nowrap;
overflow:hidden;
}