0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<h2>Содержание</h2>
1
<h2>Содержание</h2>
2
<ul><li><a>Введение</a></li>
2
<ul><li><a>Введение</a></li>
3
<li><a>Примеры</a></li>
3
<li><a>Примеры</a></li>
4
<li><a>Заключение</a></li>
4
<li><a>Заключение</a></li>
5
</ul><h2>Введение</h2>
5
</ul><h2>Введение</h2>
6
<p>В этой части мы рассмотрим типовые ситуации, в которых возникает проблема со слишком длинным или слишком коротким контентом.</p>
6
<p>В этой части мы рассмотрим типовые ситуации, в которых возникает проблема со слишком длинным или слишком коротким контентом.</p>
7
<h2>Примеры</h2>
7
<h2>Примеры</h2>
8
<p><strong>1) Карточка профиля</strong></p>
8
<p><strong>1) Карточка профиля</strong></p>
9
<p>Простой пример, в котором мы не можем заранее предсказать длину имени. Как же нам тогда поступить?</p>
9
<p>Простой пример, в котором мы не можем заранее предсказать длину имени. Как же нам тогда поступить?</p>
10
<p>Можно обрезать текст еще в первой строке, а можно растянуть его на несколько и только потом усечь.</p>
10
<p>Можно обрезать текст еще в первой строке, а можно растянуть его на несколько и только потом усечь.</p>
11
<p><strong>2) Навигационные элементы</strong></p>
11
<p><strong>2) Навигационные элементы</strong></p>
12
<p>Частая проблема, если делать многоязычный сайт. Иногда возникает ситуация, что какое-то слово (в нашем случае это "About") значительно длиннее при раскладке LTR (left-to-right) чем RTL (right-to-left). Тогда мы получаем слишком маленькую интерактивную зону клика, что не есть хорошо.</p>
12
<p>Частая проблема, если делать многоязычный сайт. Иногда возникает ситуация, что какое-то слово (в нашем случае это "About") значительно длиннее при раскладке LTR (left-to-right) чем RTL (right-to-left). Тогда мы получаем слишком маленькую интерактивную зону клика, что не есть хорошо.</p>
13
<p>Для решения данной ситуации достаточно не забывать использовать<em>min-width.</em></p>
13
<p>Для решения данной ситуации достаточно не забывать использовать<em>min-width.</em></p>
14
<p><strong>3) Продукты в корзине покупателя</strong></p>
14
<p><strong>3) Продукты в корзине покупателя</strong></p>
15
<p>Названия продуктов могут варьироваться от одной до нескольких строк. В примере ниже название продукта слишком близко к кнопке "закрыть" из-за недостаточного размера отступов между ними.</p>
15
<p>Названия продуктов могут варьироваться от одной до нескольких строк. В примере ниже название продукта слишком близко к кнопке "закрыть" из-за недостаточного размера отступов между ними.</p>
16
<p>Такое обычно решается добавлением margin к внутреннему блоку с текстом или добавлением padding к блоку-обложке.</p>
16
<p>Такое обычно решается добавлением margin к внутреннему блоку с текстом или добавлением padding к блоку-обложке.</p>
17
<p>.product__name { margin-right: 1rem; }</p>
17
<p>.product__name { margin-right: 1rem; }</p>
18
<p><strong>4) Flexbox и длинный контент</strong></p>
18
<p><strong>4) Flexbox и длинный контент</strong></p>
19
<p>Если пример из прошлого пункта показался вам слишком простым, то сейчас вы поймете, что не все вещи бывают такими очевидными. Рассмотрим следующий пример:</p>
19
<p>Если пример из прошлого пункта показался вам слишком простым, то сейчас вы поймете, что не все вещи бывают такими очевидными. Рассмотрим следующий пример:</p>
20
<p>HTML:</p>
20
<p>HTML:</p>
21
<p>CSS:</p>
21
<p>CSS:</p>
22
<p>Вот что произойдет, если имя станет слишком длинным:</p>
22
<p>Вот что произойдет, если имя станет слишком длинным:</p>
23
<p>Казалось бы: почему так? Мы ведь сделали все, о чем говорили в первой части данного топика, но получилось совсем не то, чего мы ожидали.</p>
23
<p>Казалось бы: почему так? Мы ведь сделали все, о чем говорили в первой части данного топика, но получилось совсем не то, чего мы ожидали.</p>
24
<p>Все дело в том, что по умолчанию флекс-элементы не могут сжиматься меньше длины своего контента. Для решения этой проблемы нужно установить min-width:</p>
24
<p>Все дело в том, что по умолчанию флекс-элементы не могут сжиматься меньше длины своего контента. Для решения этой проблемы нужно установить min-width:</p>
25
<p>Онлайн-пример (классы немного отличаются, но суть та же):<a>https://codepen.io/kava13/pen/YzpqLoG</a></p>
25
<p>Онлайн-пример (классы немного отличаются, но суть та же):<a>https://codepen.io/kava13/pen/YzpqLoG</a></p>
26
<h2>Заключение</h2>
26
<h2>Заключение</h2>
27
<p>Надеюсь, что вы узнали о некоторых методах работы с длинным и коротким контентом. Вы сможете подглядывать сюда и находить какие-то похожие аналоги, когда у вас возникнет неявная ситуация в верстке! :)</p>
27
<p>Надеюсь, что вы узнали о некоторых методах работы с длинным и коротким контентом. Вы сможете подглядывать сюда и находить какие-то похожие аналоги, когда у вас возникнет неявная ситуация в верстке! :)</p>