`line-clamp` CSS property

The line-clamp CSS property allows limiting of the contents of a block to the specified number of lines. Optionally, it also allows inserting content into the last line to indicate that content was truncated.

Syntax

/* 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;

Values

This property is specified as one or two space-separated values from the following list:

none

Specifies that content is not clamped. This keyword cannot be combined with the other values. This is the default.

<integer> Optional

Specifies the number of lines after which content is clamped. It must be greater than 0.

<’block-ellipsis’> Optional

Specifies the content inserted into the last line. It can take one of the following values:

• no-ellipsis: No ellipsis (character U+2026) is added if the text is truncated due to the number of line specified.
• auto: Renders an ellipsis character (U+2026) if the text is truncated.
• <string>: Renders the specified string at the end of the affected line. Browsers may truncate this string if it is very long. An empty string behaves like the no-ellipsis value.

Description

In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.

When applied to anchor elements, the truncating can happen in the middle of the text, not necessarily at the end.

Formal definition

Formal syntax

line-clamp = 
  none |
  <integer>

<integer> = 
  <number-token>

Examples

Truncating content with an ellipsis or a custom string

In this example, there are three cards, each with a different line-clamp value:

• The first has only an <integer> to restrict the number of lines.
• The second has an <integer> and the no-ellipsis value.
• The third has an <integer> and a custom <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;
}

Result

Truncating a paragraph with the legacy property

This example uses the legacy -webkit-line-clamp property with display set to -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;
}

Result

Specifications

Browser compatibility

See also

• Line Clampin' (Truncating Multiple Line Text)