Разрыв строки по слогам в CSS

В CSS есть свойство word-break, которое позволяет разбивать слова по строкам в определенных точках (например, у первого произвольного символа, длина которого превышает желаемую длину). Но, к моему удивлению, похоже, не существует никакого CSS-механизма (даже плохо поддерживаемого), чтобы разбивать слова по строкам по слогам, как в традиционной печатной книге:

... гимн, который Джуд повторял под влиянием поли-
теистическая фантазия, о которой он никогда бы не подумал...

Я это понимаю
(i) это не часто необходимо на компьютере (потому что мы можем перекомпоновывать и выравнивать динамически), и
(ii) для этого потребуется словарь переносов на клиенте.
Но это может быть полезно для исключительно длинных слов (вспомните Джеймса Джойса!) или просто для воспроизведения стиля печатной книги; а поскольку в современных браузерах уже есть проверка орфографии, нет причин, по которым мы не можем использовать переносы.

HTML имеет атрибут lang, так что мы обычно можем сделать вывод о предполагаемом языке; если бы этот словарь был недоступен, мы могли бы «изящно деградировать» и обернуть каким-нибудь другим способом.

Итак: рассматривался ли в CSS когда-либо всерьез вопрос о разбиении на слоги? Или оно было отклонено? Можем ли мы ожидать его реализации в будущем?

К сожалению, это не реализовано, и я сомневаюсь, что это возможно из-за природы языка. Я бы просто обернул слово и назвал бы это днем

subparry 19.11.2022 02:00
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы ищете hyphens недвижимость. Вам понадобится атрибут lang HTML, чтобы заставить его работать (поскольку переносы, очевидно, основаны на языке).

Браузер может автоматически разбивать слова в соответствующих местах. точки переноса, следуя любым правилам, которые он выбирает. Однако, предлагаемые варианты переноса строки (см. раздел «Предложение переноса строки»). возможности ниже) переопределит автоматический выбор точки останова когда присутствует.

Примечание. Поведение автоматической настройки зависит от используемого языка. должным образом помечены, чтобы выбрать соответствующие правила переноса. Ты должен укажите язык, используя HTML-атрибут lang, чтобы гарантировать, что на этом языке применяется автоматический перенос.

Подробнее здесь

p {
  float: left;
  width: 250px;
  margin: auto 20px;
  border: solid 1px;
  hyphens: auto
}
<p>The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection
  when present.</p>

<p lang = "en">The browser is free to automatically break words at appropriate hyphenation points, following whatever rules it chooses. However, suggested line break opportunities (see Suggesting line break opportunities below) will override automatic break point selection
  when present.</p>

Также :lang() псевдокласс как бы связан.

Спасибо. Так что я думаю, что механизм есть, но пока никто не удосужился реализовать детали. Интересный.

equin0x80 19.11.2022 10:34

Другие вопросы по теме