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

Я использую word-break: break-all; и хочу знать, как сделать так, чтобы браузер автоматически вставлял дефисы, как показано в примере 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>

Чтобы текст выглядел так:

aaaaaaaa-
aaaaaaaa-
aaaaaaaa-
aaaaaaaa

Я также создал JSFiddle.

Это должно работать в IE9 / IE10, но было бы неплохо, если бы это работало также в Firefox и Chrome.


css word-break
person chovy    schedule 07.03.2013    source источник

Ответы (4)


arrow_upward
12
arrow_downward

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

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

Это пока не работает в Chrome: Расстановка переносов в WebKit

person Ben Lee    schedule 07.03.2013
comment
По состоянию на 2015 год мир еще не готов к хайпам css: caniuse.com/#feat=css -дифы - person Hannes Schneidermayer; 15.06.2015

arrow_upward
25
arrow_downward

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

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

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

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

person Jukka K. Korpela    schedule 07.03.2013

arrow_upward
10
arrow_downward

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

aaaaaaaaaaaaaaaaaa

нет в словаре.

Поэтому вы должны вставить мягкие дефисы &shy;, как вам нравится, как в https://jsfiddle.net/LJYj3/5/ < / а>

Вот еще пища для размышлений: https://stackoverflow.com/a/856322/1696030

person Volker E.    schedule 07.03.2013
comment
Вы можете объяснить, как работает этот jsfiddle? Куда мне вставить? - person user1380540; 17.03.2016
comment
@ user1380540 Вы можете вставить &shy; в любом месте, где, по вашему мнению, уместно использовать мягкое разделение слов вручную через дефис. - person Volker E.; 20.03.2016
comment
Спасибо за - person Shashank Bhatt; 28.11.2019

arrow_upward
0
arrow_downward

Мне не удалось найти для этого никакого решения css, поэтому исправьте это с помощью js.

const addWordBreaks = (str, maxLength = 10) => {
    const words = str.split(" ");
    const newWords = [];
    words.forEach(function(word) {
      if (word.length > maxLength) {
        const firstWord = word.substr(0,maxLength);
        const endWord = word.substr(maxLength, word.length-1);
        newWords.push(firstWord +"- \n");
        newWords.push(endWord)
      } else {
        newWords.push(word)
      }
    });
     return newWords.join(" ");
  }
person Yash Ojha    schedule 09.06.2021