Mastering -webkit-line-clamp for Truncated Text in CSS

In web development, sometimes we need to truncate long text to fit within a particular layout, especially when dealing with card designs.

CSS provides a powerful way to handle text truncation with the -webkit-line-clamp property. This property allows us to limit the number of lines in a block of text, displaying an ellipsis (…) if the text exceeds that limit.

In this blog, we’ll cover tips and tricks for using -webkit-line-clamp, and I’ll show an example of three cards with truncated titles and descriptions, each containing a button.

What is -webkit-line-clamp?

-webkit-line-clamp is part of the CSS Flexible Box Layout and helps in limiting the number of lines shown in a block of text.

Also Read: CSS Ellipsis (the 3 dots…) on Single OR Multiple Lines

It’s commonly used with the display: -webkit-box and -webkit-box-orient properties. This feature is very useful in scenarios like blog posts, product descriptions, or any text that needs to be constrained to a few lines.

How to Use -webkit-line-clamp

To use -webkit-line-clamp, there are a few key properties you must combine:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: [number of lines];
overflow: hidden;

This combination ensures that the text is limited to a specified number of lines and adds an ellipsis when it overflows.

Example: Three Cards with Truncated Title and Description

Here’s an example of three cards with titles and descriptions using -webkit-line-clamp to limit the text to a specific number of lines.

	<div class="card-container">
    <div class="card">
        <div class="card-title">This is a very long card title that will be truncated</div>
        <div class="card-description">
            This is a detailed description of the card. It's a little bit long and will also be truncated after two lines for better layout control.
        </div>
        <a href="#" class="card-button">Read More</a>
    </div>

    <div class="card">
        <div class="card-title">Another lengthy title to be truncated</div>
        <div class="card-description">
            Here is another card's description which explains the content in more detail but it won't show the entire text unless you click the button.
        </div>
        <a href="#" class="card-button">Read More</a>
    </div>

    <div class="card">
        <div class="card-title">Short title</div>
        <div class="card-description">
            This description is shorter, but the line clamp will still be in effect if the text is longer.
        </div>
        <a href="#" class="card-button">Read More</a>
    </div>
</div>

.card-container {
	display: flex;
	gap: 20px;
	margin: 20px;
}

.card {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 20px;
	width: 250px;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

.card-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-description {
	font-size: 14px;
	margin-bottom: 20px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-button {
	display: inline-block;
	padding: 10px 15px;
	background-color: #007BFF;
	color: white;
	border: none;
	border-radius: 5px;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
}

.card-button:hover {
	background-color: #0056b3;
}

Explanation of the Code:

Card Title:

The title text is truncated to a single line using -webkit-line-clamp: 1;.
Even if the title is long, only the first line will be visible, and the rest will be hidden with an ellipsis.

Card Description:

The description text is limited to two lines using -webkit-line-clamp: 2;.
This helps keep the layout clean and uniform, even if the content varies in length.

Card Button:

A simple button is added to each card to provide a call-to-action like “Read More”.

Output:

See the Pen Line Clamp Example by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Conclusion

Using -webkit-line-clamp is a powerful way to handle truncating text in your layouts, ensuring a clean and professional appearance. By following these tips and understanding how to combine properties effectively, you can create beautiful, responsive card layouts in your web applications.

Happy coding!