Всем привет.
Сегодня на простом примере покажу, как обрезать текст по размерам контейнера-родителя и поставить многоточие в конце.
Всё будем делать, используя только CSS.
Такая вещь часто используется на сайтах для анонсов. Когда мы точно не знаем, какого размера текст к нам придёт, но хотим, чтобы все однотипные блоки с таким текстом выглядели красиво и ровно.
Я сделаю самую простую разметку:
- контейнер div
- и текст в нем, обернутый в тег абзаца.
<div class="box"> <p class="box-text">Это краткое содержимое, которое нужно обрезать по размеру контейнера box</p> </div>
Для блока с классом “box” зададим стили, чтобы у него были фиксированные высота, ширина, выравнивание контента внутри и кое-какой внешний вид.
.box{ width: 200px; height: 50px; box-shadow: 2px 2px 2px #999; background: #e3e3e3; display: flex; align-items: center; }
Обрезаем текст и добавляем многоточие в конце
Теперь самое главное. Зададим стили для тега абзаца, в котором и находится наш текст. Сделаем так, чтобы он был обрезан по размера родителя, а в конце бы добавлялось многоточие.
.box-text{ font-family: sans-serif; font-size: 15px; color: darkslategrey; white-space: nowrap; /* Отменяем перенос текста */ overflow: hidden; /* Обрезаем содержимое */ padding: 5px; /* Поля */ text-overflow: ellipsis; /* Многоточие */ }
Получим вот такой результат:
Смотрите также, Как извлечь часть текста в php.