CSS: Устраняем проблему длинных слов
Устраняем проблему длинных слов с помощью переносов.
word-wrap - это свойство CSS, которое управляет тем, как текст внутри элемента переносится на новую строку, когда он не помещается на одной строке. Доступны два значения для свойства word-wrap: normal и break-word.
- word-wrap: normal; - это значение по умолчанию, при котором длинные слова не переносятся на новую строку и выходят за границы контейнера.
- word-wrap: break-word; - это значение, при котором длинные слова переносятся на новую строку, если они не помещаются в контейнер.
overflow-wrap - это свойство CSS, которое управляет тем, как текст переносится на новую строку внутри блочных элементов, когда он не помещается на одной строке. Если строка слишком длинная, чтобы поместиться на одной строке, свойство overflow-wrap: break-word; разрешает перенос слова на новую строку, чтобы текст был легче читать и вместился в контейнер. overflow-wrap представляет собой комбинацию двух свойств - word-wrap и overflow. Оно было добавлено в CSS3 как замена устаревшего свойства word-wrap.
word-break - это свойство CSS, которое управляет тем, как длинные слова переносятся на новую строку внутри элемента. Если слово не помещается на одной строке, оно может быть разбито на части для того, чтобы избежать выхода за границы элемента. word-break имеет три значения:
- word-break: normal; это значение по умолчанию, при котором длинные слова разбиваются только при наличии символов-разделителей, таких как пробел или дефис.
- word-break: break-all: это значение, при котором длинные слова могут быть разбиты на части в любой точке слова, даже если это означает разрыв буквы на части.
- word-break: keep-all: это значение, при котором длинные слова не разбиваются, и вместо этого просто смещаются вправо, чтобы соответствовать границе элемента.
hyphens - это свойство CSS, которое контролирует перенос слов с помощью дефисов, чтобы избежать излишнего пробела или вылетающего слова за пределы элемента. hyphens был добавлен в CSS3 и имеет три значения:
- hyphens: none; - перенос слова не разрешен.
- hyphens: manual; - перенос слова разрешен только с использованием явно заданных мягких переносов, таких как <wbr>.
- hyphens: auto; - перенос слова разрешен с использованием мягких и жестких дефисов.
Значение auto означает, что браузер может использовать мягкие дефисы для разделения слов, когда это необходимо, чтобы избежать вылетающих слов или длинных пробелов. Однако, если в тексте используются жесткие дефисы, то браузер будет использовать их вместо мягких.
word-wrap: break-word; overflow-wrap: break-word; word-break: break-all; hyphens: auto;
Кроссбраузерная версия правил:
/* для поддержки старых браузеров, таких как Internet Explorer 5.5 и 6 */ word-wrap: break-word; word-break: break-all; /* для поддержки современных браузеров, таких как Chrome, Firefox и Safari */ overflow-wrap: break-word; word-break: break-all; /* для поддержки мягкого переноса слов с использованием дефисов */ -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
Если длинная строка текста в ячейке таблицы растягивает таблицу, можно использовать свойство word-wrap в CSS, чтобы переносить текст на новую строку, когда он не помещается в ячейке. Свойство table-layout устанавливает фиксированную ширину таблицы, а свойство word-wrap устанавливает перенос слов, когда текст не помещается в ячейку.
table { table-layout: fixed; width: 100%; } td { word-wrap: break-word; }
Комментарии