Line Clamping and Multiple Line Truncating in CSS

Last Updated : 30 Sep, 2024

Line clamping, or multi-line truncation limits the number of visible lines of text in a block while truncating any additional text that exceeds the specified number of lines. This is useful for maintaining clean layouts and ensuring that excessive text doesn't disrupt the design.

There are two common use cases for line clamping:

1. Truncating Text After One Line

If you need to truncate text after a single line, you can use the text-overflow property in CSS. This property creates an ellipsis (...) at the end of the line and gracefully cuts off any overflowed text.

div{
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

Example: The below code demonstrates text-overflow property of CSS

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
      
    <style>
        .text{
          width: 300px;
            white-space: nowrap; 
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="text">
        Hello GeeksforGeeks. A Computer Science portal for geeks.
        It contains well written, well thought articles. 
        This is a paragraph containing multiple lines.
    </div>
</body>
</html>

Output:

Screenshot-2024-09-30-151643 — Truncating Text After One Line

2. Truncating Text After Multiple Lines

To truncate text after multiple lines, you can use -webkit-line-clamp, a WebKit-specific property that limits the text to a certain number of lines. However, this approach is not widely supported across all browsers and primarily works in WebKit-based browsers like Chrome and Safari.

.text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 16px;
    max-height: 32px; /* Limiting to 2 lines */
    -webkit-line-clamp: 2; /* Specify the number of lines */
    -webkit-box-orient: vertical;
}

Example: The below code demonstrates truncating of N lines using WebKit:

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        .text {
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            line-height: 16px;
            max-height: 32px; /* For 2 lines */
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="text">A very long piece of text that will be truncated after two lines using WebKit-specific properties.</div>
</body>
</html>

Output:

Screenshot-2024-09-30-151905 — Truncating Text After Multiple Lines

3. Truncating Text in Opera (Legacy)

Opera's older versions have their own way of handling line clamping by applying ellipsis at the end of the last visible line

.text {
    overflow: hidden;
    white-space: normal;
    height: 1.2em; /* For exactly 2 lines */
    text-overflow: -o-ellipsis-lastline;
}

html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .text{
            overflow: hidden;
            white-space: normal;
            
            /* Exactly 2 lines are displayed. 
                Height of 1 line is 1.2em*/
            height: 2.4em; 
            text-overflow: -o-ellipsis-lastline;
        }
    </style>
</head>

<body>
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur 
        sint occaecat cupidatat non proident, sunt in culpa qui 
        officia deserunt mollit anim id est laborum.Lorem ipsum 
        dolor sit amet, consectetur adipisicing elit, sed do 
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
        t enim ad minim veniam, quis nostrud exercitation ullamco 
        laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
        irure dolor in reprehenderit in voluptate velit esse cillum 
        dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
        cupidatat non proident, sunt in culpa qui officia deserunt 
        mollit anim id est laborum.
    </div>
</body>
</html>

Output:

Screenshot-2024-09-30-152025 — Truncating Text in Opera (Legacy)

While text-overflow works well for truncating text after one line, truncating text after multiple lines relies on the WebKit-specific -webkit-line-clamp property. This approach, however, has limited browser support, which can impact the user experience across different platforms.

Displaying inline and multiline blocks of code using Bootstrap

Lavisha

Improve

Article Tags :

Line Clamping and Multiple Line Truncating in CSS

1. Truncating Text After One Line

2. Truncating Text After Multiple Lines

3. Truncating Text in Opera (Legacy)

Similar Reads

Thank You!

What kind of Experience do you want to share?