Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 <h2>Содержание</h2>

2 <ul><li><a>Введение</a></li>

3 <li><a>Суть проблемы</a></li>

4 <li><a>Длинный контент</a></li>

5 <li><a>Короткий контент</a></li>

6 <li><a>Заключение</a></li>

7 </ul><h2>Введение</h2>

8 <p>При верстке очень важно рассмотреть все варианты того, как будет выглядеть тот или иной блок, если текст в нем будет слишком большой или слишком малой длины, так как это может привести к множеству ошибок и ломать интерфейс. Раньше я мог, например, пренебречь словом в макете, но это, очевидно, плохая практика.</p>

9 <p>В этой статье я хотел бы рассмотреть некоторые способы решения подобных ситуаций.</p>

10 <h2>Суть проблемы</h2>

11 <p>Прежде чем мы начнем, я бы хотел более конкретно показать суть проблемы на простом примере. Допустим, мы имеем вертикальную навигацию.</p>

12 <p>Текст может менять свою длину, особенно если вы работаете с многоязычным сайтом. Что нам делать в таком случае: текст должен обрезаться или растягиваться на несколько строк? Если растягиваться, то на сколько?</p>

13 <p>А что если вся проблема будет в том, что последнее слово в строке будет слишком длинное? Как корректно решить эту проблему? По умолчанию это слово будет переполнять контейнер.</p>

14 <p>Фронтенд-разработчику очень важно решить, что делать в таких случаях. К счастью, есть несколько не очень популярных CSS свойств, которые помогают успешно справляться с такими ситуациями.</p>

15 <h2>Длинный контент</h2>

16 <p>Теперь давайте более подробно рассмотрим ситуации с переполнением контейнера.</p>

17 <p><strong>1) Overflow Wrap</strong></p>

18 <p>CSS свойство overflow-wrap устанавливает браузеру как вести себя в случае того, если какое-то слово слишком длинное и переполняет контейнер.</p>

19 <p><strong>2) Дефисы</strong></p>

20 <p>hyphens указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк. Оно может полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.</p>

21 <p><strong>3) "Усечение" текста</strong></p>

22 <p>Усечение текста означает добавление точек в конце предложения, чтобы показать, что текстового содержимого на самом деле больше.</p>

23 <p>Нет специального CSS свойства, чтобы обрезать текст таким образом, но можно сделать подобную хитрость с помощью нескольких:</p>

24 <p><strong>4) "Усечение" текста из нескольких строк</strong></p>

25 <p>Если нужно обрезать текст только после определенной строки, то стоит использовать свойство<em>line-clamp</em>, которое, грубо говоря, получается из взаимодействия нескольких CSS свойств:</p>

26 <p><strong>5) Padding</strong></p>

27 <p>Одна из моих самых больших проблем, пока я не стал понимать в верстке немного лучше: не забывайте добавлять padding. Это очень важное свойство!)</p>

28 <p>Ниже пример списка, в котором его элемент очень близко к другому.</p>

29 <h2>Короткий контент</h2>

30 <p>Тут не так много интересных ситуаций, поэтому я решил обойтись только тем, что напомню вам про великолепное свойство min-width.</p>

31 <p>До:</p>

32 <p>После:</p>

33 <h2>Заключение</h2>

34 <p>P.S. Пост получился достаточно немаленьким, решил разбить его на 2 части. В следующей части я опубликую еще пару интересных случаев! :)</p>