Прекъсване на думи - CSS-трикове

В word-breakимота в CSS може да се използва, за да се промени, когато нови редове би трябвало да се случи. Обикновено прекъсванията на редове в текста могат да възникнат само в определени интервали, например когато има интервал или тире.

В примера по-долу word-breakвместо това можем да направим между буквите:

p ( word-break: break-all; )

Ако след това зададем ширината на текста на една em, думата ще се раздели с всяка буква:

Вижте вертикално текста на Pen Pen с прекъсване на думи от CSS-трикове (@ css-tricks) на CodePen.

Тази стойност често се използва на места с генерирано от потребителите съдържание, така че дългите низове да не рискуват да счупят оформлението. Един много често срещан пример е дълго копие и поставен URL адрес. Ако този URL адрес няма тирета, той може да се простира отвъд родителското поле и да изглежда лошо или по-лошо, да причини проблеми с оформлението.

Вижте връзките за фиксиране на писалка с прекъсване на думи от CSS-трикове (@ css-трикове) на CodePen.

Стойности

normal: използвайте правилата по подразбиране за разбиване на думи.
break-all: всяка дума / буква може да премине към следващия ред.
keep-all: за китайски, японски и корейски текстови думи не са счупени. В противен случай това е същото като normal.

Това свойство също често се използва заедно със свойството тирета, така че при настъпване на прекъсвания се вмъква хипер, съгласно стандарта в книгите.

Пълното използване, с необходимите префикси на доставчика, е:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Използването на тези свойства на универсалния селектор може да бъде полезно, ако имате сайт с много генерирано от потребителите съдържание. Макар честно предупреждение, може да изглежда странно за заглавия и предварително форматиран текст (

Свързани

препълване-увиване
тирета
бяло пространство
Работа с дълги думи и URL адреси

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.