CSS: Устраняем проблему длинных слов

Устраняем проблему длинных слов с помощью переносов.

word-wrap - это свойство CSS, которое управляет тем, как текст внутри элемента переносится на новую строку, когда он не помещается на одной строке. Доступны два значения для свойства word-wrap: normal и break-word.

overflow-wrap - это свойство CSS, которое управляет тем, как текст переносится на новую строку внутри блочных элементов, когда он не помещается на одной строке. Если строка слишком длинная, чтобы поместиться на одной строке, свойство overflow-wrap: break-word; разрешает перенос слова на новую строку, чтобы текст был легче читать и вместился в контейнер. overflow-wrap представляет собой комбинацию двух свойств - word-wrap и overflow. Оно было добавлено в CSS3 как замена устаревшего свойства word-wrap.

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

hyphens - это свойство CSS, которое контролирует перенос слов с помощью дефисов, чтобы избежать излишнего пробела или вылетающего слова за пределы элемента. hyphens был добавлен в CSS3 и имеет три значения:

Значение 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;
}
CSS 7.6 г. Просмотров: 2.2k
Оценить код:

Комментарии

Ваш комментарий будет первым.
Войдите, чтобы оставить комментарий.