Как в CSS переносить очень длинное слово по буквам на новую строку?

Question

Есть блок с текстом, в котором есть длинное слово.

Как с помощью CSS перенести это слово побуквенно на новую строку, чтобы слово не выходило за пределы блока?

Answer 1

В стилях для переноса сток используй word-wrap: break-word;

Answer 2

Используйте свойство word-break, есть несколько свойств, по ссылке есть примеры и описание.

ul {
  width: 100px;
  margin: 0;
  padding: 0;
  background: #ccc;
}

ul li {
  word-break: break-all;
}

<ul>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>Оченьдлинноеслово</li>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>текст текст</li>
</ul>

Чтобы перенос был по буквам, используйте word-break: break-all;

Так же можно ограничить текст, обрезав "вылезающий" текст и визуально (через троеточие) пометить "продолжение текста", при помощи свойства text-overflow.

ul {
  width: 100px;
  margin: 0;
  padding: 0;
  background: #ccc;
}

ul li {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<ul>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>Оченьдлинноеслово</li>
  <li>текст текст</li>
  <li>текст текст</li>
  <li>текст текст</li>
</ul>

БЛОГ НА HUSL

Как в CSS переносить очень длинное слово по буквам на новую строку?

Ответы (2 шт):