Изменено поведение дефисов CSS в Chrome 55.0.2883.95

Кажется, что установка "дефисов" на "авто" теперь имеет более высокий приоритет, чем "пустое пространство: сейчас". В предыдущих версиях Chrome (54 предыдущих в Mac) и других браузерах (FF, Safari, IE) это выглядит как "пробел: сейчас" перебивает дефисы. Итак, если вы укажете пустое пространство: nowrap и text-overflow: ellipsis, вы увидите, что текст усекается с помощью многоточия независимо от значения дефисов.

Начиная с 55.0.2883.95 (версия для Mac), это выглядит как дефис: auto будет выполнять перенос строк, даже если указано пробел: nowrap. Я согласен, что глупо указывать дефисы и Nowrap одновременно. Но так как это "новое" поведение, я хотел бы подтвердить, является ли это ошибкой или предполагаемым поведением.

Я создал простую скрипку для тестирования этой проблемы для сравнения поведения в других браузерах.

div {
  width: 75px;
  border: 1px solid black;
}
div.testCls {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
<div lang="en" class="testCls">Anextremely long English word</div>

Скриншоты:

Chrome в Mac 55.0.2883.95 (64-разрядная версия)

Источник

2 ответа

Решение

Я считаю, что это проблема Chrome; один и тот же код отлично работает в Firefox и Safari;

способ исправить это, просто добавьте дефисы: нет; в ваш усеченный класс.

Источник

Что касается использования Chrome hyphen: auto если вы посмотрите на caniuse, вы увидите, что auto свойство для Chrome не поддерживается. И когда я проверял это, в Chrome не отображались дефисы (если вы не используете ручной метод дефисов).

На основании вашего вопроса я не нашел формальной документации, чтобы ответить на ваш вопрос, но я проверил ваш код на Chrome, Firefox и IE (на Windows) и обнаружил, что с помощью white-space: nowrap; во всех случаях текст вызывается не дефисом. Пока nowrap значение используется это также вызывает overflow: hidden; элемент и text-overflow: ellipsis; работать так, как ожидалось, так как оба этих элемента нуждаются в неперекрывающем тексте, чтобы продемонстрировать свои свойства. надеюсь, это поможет

Источник
Другие вопросы по тегам