Как обрезать длинные тексты только при помощи CSS
- 18 октября, 2022
- 10:04 пп
- Нет комментариев
Часто бывает так, что на странице есть большой кусок текста, который нужно обрезать. Использование overflow: hidden не всегда поможет, ведь текст может обрезаться даже посредине буквы.
Часто бывает так, что на странице есть большой кусок текста, который нужно обрезать. Использование overflow: hidden не всегда поможет, ведь текст может обрезаться даже посредине буквы.
Чтобы обрезать куски текста красиво, в CSS есть свойство text-overflow: ellipsis, которое позволяет обрезать строку с длинным текстом, добавляя в конце троеточие ....
Для того, чтобы такое решение сработало, нужно указать точную ширину родительского блока (например, 100%) и добавить несколько параметров.
Все из указанного является обязательным:
.cut-text {
text-overflow: ellipsis; // образка длинных блоков с текстом
overflow: hidden; // прятать выходящий за пределы текст
width: 100%; // ширина блока с текстом
white-space: nowrap; // запрет на перенос текста
}
Давайте посмотрим, как это работает.
<div class="cut-text">
А это Томми. Он всем говорит, что его назвали в честь автомата «Томми ган», но на самом деле его назвали в честь знаменитого в 19-ом веке балетного плясуна.
</div>
И вот что получится в результате:
А это Томми. Он всем говорит, что его назвали в честь автомата «Томми ган», но на самом деле ег...
Если текст внутри блока помещается в него, троеточие добавляться не будет, а сам текст будет отображаться как обычно:
Томми всем говорит, что его назвали в честь автомата «Томми ган».
Обратите внимание: такое решение работает только для текста в одну строку.
Похожие записи
08.04.2024
Комментариев нет
06.03.2024
Комментариев нет
19.02.2024
Комментариев нет
