CSS-свойство `line-clamp`

Свойство line-clamp CSS позволяет ограничить содержимое блочного элемента указанным количеством строк. Кроме того, оно позволяет добавить содержимое в последнюю строку, чтобы обозначить усечение текста.

Синтаксис

/* Keyword value */
line-clamp: none;

/* <integer> value only */
line-clamp: 3;
line-clamp: 10;

/* <integer> and <'block-ellipsis'> values */
line-clamp: 3 no-ellipsis;
line-clamp: 10 "… (there is extra content)";

/* <'block-ellipsis'> value only */
line-clamp: no-ellipsis;
line-clamp: "… (there is extra content)";

/* Global values */
line-clamp: inherit;
line-clamp: initial;
line-clamp: revert;
line-clamp: revert-layer;
line-clamp: unset;

Значения

Это свойство задаётся одним или двумя значениями из следующего списка, разделёнными пробелом:

none

Указывает, что содержимое не обрезается. Это ключевое слово нельзя комбинировать с другими значениями. Используется по умолчанию.

<integer> Необязательно

Указывает количество строк, после которого содержимое обрезается. Значение должно быть больше 0.

<’block-ellipsis’> Необязательно

Указывает содержимое, добавляемое в последнюю строку. Возможны следующие значения:

• no-ellipsis: многоточие (символ U+2026) не добавляется, если текст усечён из-за указанного количества строк.
• auto: если текст усечён, отображается символ многоточия (U+2026).
• <string>: указанная строка отображается в конце соответствующей строки. Если строка очень длинная, браузеры могут её обрезать. Пустая строка ведёт себя так же, как значение no-ellipsis.

Описание

В большинстве случаев следует также задать для overflow значение hidden, иначе содержимое не будет обрезано, но после указанного количества строк всё равно появится многоточие.

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

Формальное определение

Формальный синтаксис

line-clamp = 
  none |
  <integer>

<integer> = 
  <number-token>

Примеры

Усечение содержимого с многоточием или пользовательской строкой

В этом примере показаны три карточки, каждая с отдельным значением line-clamp:

• Для первой задано только <integer>, ограничивающее количество строк.
• Для второй заданы <integer> и значение no-ellipsis.
• Для третьей заданы <integer> и пользовательское <string>.

HTML

<section>
  <div class="card">
    <h2>number of lines</h2>
    <p class="integer">
      In this card, the <em>number of lines</em> is specified by an
      <code>&lt;integer&gt;</code>. Any content that does not fit is truncated
      and an ellipsis is shown.
    </p>
  </div>
  <div class="card">
    <h2>no ellipsis</h2>
    <p class="no-ellipsis">
      In this card, an <code>&lt;integer&gt;</code> and a
      <em>no-ellipsis</em> value are specified. Any content that does not fit is
      truncated and no ellipsis is shown.
    </p>
  </div>
  <div class="card">
    <h2>custom string</h2>
    <p class="string">
      In this card, an <code>&lt;integer&gt;</code> and a <em>string</em> value
      are specified. Any content that does not fit is truncated and the custom
      string is shown instead of an ellipsis.
    </p>
  </div>
</section>

CSS

/* layout for the cards */
section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  justify-content: space-between;
}
em {
  color: tomato;
}
.card {
  padding: 0.2rem;
  border: 1px solid tomato;
  border-radius: 0.2rem;
  max-width: 250px;
}

.integer {
  line-clamp: 2;
  overflow: hidden;
}
.no-ellipsis {
  line-clamp: 2 no-ellipsis;
  overflow: hidden;
}
.string {
  line-clamp: 2 "… (my custom text)";
  overflow: hidden;
}

Результат

Усечение абзаца с помощью устаревшего свойства

В этом примере используется устаревшее свойство -webkit-line-clamp, для которого display задано значение -webkit-box.

HTML

<p>
  In this example the <code>-webkit-line-clamp</code> property is set to
  <code>3</code>, which means the text is clamped after three lines. An ellipsis
  will be shown at the point where the text is clamped.
</p>

CSS

p {
  width: 300px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Line Clampin' (усечение текста в нескольких строках)