Почему мои переполненные эллипсы отключены в Chrome?

При определенных ширинах мои эллипсы обрезаются. Я создал скрипку, демонстрирующую ее. Я пробовал разные комбинации полей и отступов, но не могу их исключить. Я использую 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;
}

Ответы

Ответ 1

Проблема, которую я создал в Chromium, была объединена как дубликат этот вопрос, который затем слился как дубликат этот вопрос. Я буду обновлять этот ответ по мере изменения статуса.

UPDATE: Проблема НЕ отображается в Canary, поэтому выпуск Chrome для ближайшей версии должен решить проблему.

ОБНОВЛЕНИЕ 2: Проблема была решена в Chrome 52.

Ответ 2

Как уже указывали другие, это ошибка Chrome, но вы можете легко обойти ее, добавив несколько дополнений padding-right: 4px.

Ответ 3

По какой-то причине, что именно 193px это происходит, должно быть, но в Chrome, так оно вычисляет, какая буква должна быть отключена. Используйте 192px.

.container {
  width:196px;
  font-size:30px;
}

.container.two {
  width:192px;
}

.nowrap{
  text-overflow: ellipsis;
  white-space:nowrap;
  overflow:hidden;
}

<div class="container">
  <div class="nowrap">This text should be truncated</span>
</div>

<div class="container two">
  <div class="nowrap">This text should be truncated</span>
</div>