Текст в контейнер

Как текстът се държи в контейнер – контрол върху пренасяне и изрязване

Текстът в блоков елемент по подразбиране заема цялата налична ширина и се пренася на нов ред при интервал. Ако забраним пренасянето, той може да излезе извън контейнера. За да контролираме това поведение, използваме комбинация от свойства, с които ограничаваме видимата част от текста и показваме многоточие при изрязване. Ключов момент е разбирането как box-sizing влияе върху крайната ширина на елемента.

Стъпка по стъпка: контрол върху текста

1. Добавете по-дълъг текст в блоков елемент (напр. li) и му задайте фиксирана ширина, например width: 100px;.
2. Наблюдавайте как текстът се пренася автоматично при стесняване на екрана.
3. Забранете пренасянето с white-space: nowrap; – текстът ще остане на един ред и ще излезе извън контейнера.
4. Ограничете видимата част с overflow: hidden; – излишното съдържание ще бъде скрито.
5. Добавете text-overflow: ellipsis;, за да се показват „…“ при изрязан текст.
6. Добавете padding и задайте box-sizing: border-box;, за да запазите реалната ширина на контейнера, включително вътрешните отстояния.

Използвани CSS свойства

• white-space – контролира пренасянето на текста (nowrap забранява пренасяне).
• overflow – определя какво се случва със съдържание извън контейнера (hidden го скрива).
• text-overflow – добавя визуален индикатор при изрязан текст (ellipsis).
• box-sizing – определя дали padding и border участват в зададената ширина (border-box ги включва).
• width – задава фиксирана ширина на контейнера.