Обрезаем текст и устанавливаем многоточие с помощью css свойств

На этапе дизайна планируются размеры текстовых блоков. На этапе эксплуатации может быть добавлен текст большего объема, что отобразится на всем дизайне. Единственный вариант, при котором не сломается верстка – это обрезать текст в рамках текстового блока.

Для того, чтоб дать понять пользователю, что текст обрезан мы добавим многоточие в конце обрезанной строки. Точнее, отдельно обрезкой и добавлением многоточия мы заниматься не будем, а сделаем все разом.

Рассмотрим два случая обрезки текста:

• Как обрезать текстовый блок в несколько строк

• Как обрезать текст в одну строку

Отрезаем текст большого объема

При выводе фрагмента статьи на странице рубрики или блога нам в любом случае понадобится обрезать текст статьи и оставить толико его фрагмент.

HTML код такого блока будет выглядеть примерно так:

<div class="container">
    <div class="card-cat">
      <div class="image-cat">
        <img src="./image/kotik.jpg" alt="">
      </div>
      <div class="text-bloc">
        <h2 class="title-text-bloc">
          Найден самый веселый котик в России
        </h2>
        <div class="text">
          <p>
            Однажды в солнечный день, когда все вокруг было полно радости и смеха, появился самый веселый котик во всей округе. Его мягкая и пушистая шерсть отбрасывала яркие блики на каждом шагу. Он был полон энергии и счастья, который просто заражал всех вокруг.

            У этого котика были большие ярко-зеленые глаза, которые всегда сверкали радостью. Он был мастером высоких прыжков и невероятных акробатических трюков. Когда он бегал, его хвостик скачком  танец.

            Самое забавное в этом котике были его игры. Он любил ловить световые лучи, которые проникали сквозь оконные стекла и создавали разноцветные отражения на стенах. Когда он прыгал и ловил эти лучи, его радостные мяукания заполняли весь дом смехом.
          </p>
        </div>
      </div>
    </div>
  </div>

CSS код, который делает стандартную стилизацию текстового блока будет выглядеть так:

.text p{
  color: #333;
  font-family: Montserrat;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 142.9%; /* 22.864px */
}

Стоит принять во внимание, что html элементу карточки установлена максимальная ширина (max-width:)

Для того, чтоб текст обрезался после шестой строки понадобится добавить CSS код:

.text p{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  text-align: left;
}

Для реализации подобного в WordPress используются другие методы, основанные на функциях WordPress. Но, это уже другая история, о которой я рассказал здесь.

Разберем подробнее добавленный css код

Всего нам для реализации понадобится шесть css свойств.

1. overflow: hidden;: Это свойство устанавливает, что весь контент, который не умещается внутри элемента, будет скрыт и не видим для пользователя. Это нужно для обрезания текста, который выходит за границы элемента.
2. text-overflow: ellipsis;: Это свойство указывает, что если текст обрезается из-за его длины, то в конце обрезанного текста следует добавить многоточие (три точки «…»), чтобы показать, что текст не полностью отображается из-за ограничения по размеру контейнера.
3. display: -webkit-box;: Это свойство устанавливает значение -webkit-box для CSS свойства display. Оно используется совместно с другими свойствами, чтобы создать многоколоночный текстовый контейнер.
4. -webkit-line-clamp: 6;: Это специфичное для WebKit свойство, которое указывает максимальное количество строк текста, которые могут быть видимыми внутри контейнера. В данном случае, текст будет обрезаться после 6 строк, и многоточие будет добавлено.
5. -webkit-box-orient: vertical;: Это также свойство, специфичное для WebKit, которое указывает ориентацию элемента, созданного как многоколоночный текстовый контейнер. В данном случае, значение vertical указывает, что текст будет отображаться вертикально, в столбцы.

Важно отметить, что -webkit-box и другие -webkit- свойства являются вендорно-префиксированными и могут работать только в браузерах, использующих движок WebKit, таких как Safari. Для более широкой совместимости с браузерами, вы можете использовать стандартные CSS свойства, такие как display: flex; и display: grid;, чтобы создать подобный многоколоночный текстовый контейнер, а также использовать стандартные свойства для обрезания текста, такие как overflow и text-overflow.

Обрезка текста в одну строку

Зачастую нужно обрезать текс до одного или нескольких строк. Это можно встретить при вкладках переключения для экранов не большой ширины.

Для реализации текста во вкладках достаточно взять код, который мы применяли для текстового блока карточки с котиком и слегка его изменить.

Для текста нужно обязательно установить свойство max-width.

Из текста выше мы уже знаем, что свойство -webkit-line-clamp: 1; задает количество строк видимого текста. Соответственно для вкладки нам понадобится установить значение свойства равное 1.

Вывод

Для того, чтоб реализовать обрезку текста в случаях, когда его объем выше запланированного на этапе дизайна достаточно будет добавить 6 CSS свойств. Данные свойства можно скопировать в статье, вставить в свой css файл и изменить параметр, ограничивающий количество строк.