CSS line-clamp Property

❮ Prev Next ❯

The line-clamp property truncates a text at a specified number of lines. It limits the text, after you tell it the desirable number of lines, adding an ellipsis after the last word or portion of a word that is demonstrated. It is a shorthand for:

This property is in progress.

Disadvantages of the CSS line-clamp Property

CSS line-clamp property has some disadvantages, and we are going to look through each one:

The CSS line-clamp property has limited browser support. It is not supported by such browsers as Opera Mini. However, you can create fallbacks for the browsers that don’t support this property. Using @supports (-webkit-line-clamp: 2) {} check, will show whether it works in the current browser or not. If it doesn’t work, this check will provide a fallback for that browser.
Another disadvantage is that it doesn’t offer any alternative to the ellipsis. This causes another problem: you may get different definitions in different language.
The CSS line-clamp property calls for lots of supporting properties like:

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

Initial Value	none
Applies to	-
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.lineClamp = "2";

Please note that in the case of "display: -webkit-box", this is an older, non-standard way of achieving a flexible box layout that was used by older versions of Safari and some other WebKit-based browsers. The "display: flex" property is now the standard way of achieving a flexible box layout, but for compatibility with older versions of Safari and other WebKit-based browsers, the "-webkit-box" prefix is still used as a fallback.

Syntax

line-clamp: normal | <integer> | initial | inherit;

Example of the line-clamp property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        align-items: center;
        background: radial-gradient( farthest-side at bottom left, #eee, #ccc), 
        radial-gradient( farthest-corner at bottom right, #eee, #ccc 400px);
        display: flex;
        flex-direction: column;
        height: 100vh;
        justify-content: center;
        line-height: 1.5;
      }
      .element {
        background-color: #fff;
        box-shadow: 1px 1px 10px #666;
        padding: 2em;
        width: 200px;
      }
      .element p {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <h2>CSS line-clamp  property example</h2>
    <div class="element">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
        <p>
    </div>
  </body>
</html>

Try it Yourself »

Result

In the given example, the text is cut at the fourth line.

Values

Value	Description
none	No maximum number of lines and no truncation.
<integer>	Sets maximum number of lines before truncating the content and then displays an ellipsis.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.