Как обрезать текст и добавить многоточие в конце

/ 👁 6100

Всем привет.

Сегодня на простом примере покажу, как обрезать текст по размерам контейнера-родителя и поставить многоточие в конце.

Всё будем делать, используя только 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.

Tags: ,

Leave a Reply