Проблемы с переносом CSS в длинных словах в Chrome - PullRequest
Новая
       34

Проблемы с переносом CSS в длинных словах в Chrome

0 голосов
/ 18 октября 2019

Я пытаюсь использовать дефисы CSS для переноса длинных слов, как, например, в в этом примере

Как вы видите, последняя буква падает на новой строке. Это происходит в Chrome, а не, например, в Safari. Поскольку мой макет использует блоки определенной ширины, и я хотел бы разместить слова в блоках, решение состоит не в том, чтобы изменить размер шрифта или ширину блока, а в том, чтобы решить проблему с переносами. 

p {
  width: 105px;
  border: 1px solid black;
  text-align: center;
}

p.hyphenate {
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  word-wrap: break-word;
}
<p class="hyphenate">ANONYMOUSLY</p>
<p class="hyphenate">EXEMPLARITY</p>
<p class="hyphenate">THAT EXEMPLARITY</p>

В последнем абзаце «Y» падает на новую строку без переносов.

Вот пример CodePen. Прекрасно работает в Safari, не работает в Chrome: 

https://codepen.io/jospo/pen/MWWjzLe

Спасибо за любые предложения.

1 Ответ

1 голос
/ 18 октября 2019

hyphens является только рабочим черновиком Свойство CSS в настоящее время и в настоящее время не полностью реализовано или поддерживается всеми браузерами.

Я предлагаю вам просмотреть таблицы поддержки на CanIUse.com , который имеет следующие примечания.

Chrome <55 и браузер Android 4.0 поддерживают "-webkit-дефис: нет", но не имеют свойства "auto". Рекомендуется установить атрибут @lang в элементе HTML, чтобы включить поддержку переносов и улучшить доступность. </p>

Для Chrome: Поддерживается только на платформах Android и Mac (и только «auto»значение) на данный момент.

...