Подтвердить что ты не робот

Как использовать автоматические дефисы CSS с "word-break: break-all"?

Я использую word-break: break-all; и хочу знать, как я могу заставить браузер автоматически вставить hyphens, как показано в пример MDN.

div {
  width: 80px;
  height: 80px;
  display: block;
  overflow: hidden;
  border: 1px solid red;
  word-break: break-all;
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Ответ 1

Свойство -ms-hyphens работает только в IE10+. Это невозможно в IE9 или ниже.

См. таблицу совместимости браузера внизу справочной ссылки, которую вы предоставили.

В Chrome еще не работает: перенос веб-сайтов

Ответ 2

Свойством word-break и переносом являются две совершенно разные вещи. Первый, первоначально предназначенный для восточноазиатских языков, в основном, плохо относится к таким языкам, как английский: он произвольно сокращает количество орфографических ошибок, не указывая на то, что сломалось слово.

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

Для переносов код CSS как таковой в порядке, хотя многие люди будут советовать помещать стандартную настройку свойства hyphens: auto last, после префиксных свойств. Но для этого требуется, чтобы язык текста был объявлен в разметке HTML, используя, например, <div lang=en>. Более того, поддержка браузера по-прежнему ограничена: IE 9 не поддерживает такую перенос, и поддержка в IE 10 охватывает относительно небольшой набор языков (включая английский, конечно).

Для автоматической переносов в IE 9 вам нужно будет использовать либо переносимую на стороне сервера рассылку, либо более простое перенос с клиентской стороны с помощью таких инструментов, как Hyphenator.js.

Ответ 3

В случае, если браузер поддерживает, а язык включает словарь переносов, вставляются дефисы. Но ваш

aaaaaaaaaaaaaaaaaa

не находится в словаре.

Поэтому вам нужно пойти на мягкие дефисы, например, в https://jsfiddle.net/LJYj3/5/

Здесь больше пищи для размышлений: fooobar.com/info/78933/...