Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set the limit of text length to N lines using CSS
To set the limit of text length to N lines, it can help in more organized presentation of text and better readability. This process is also known as truncating. In this article we will be understanding different approaches to truncate the text.
In this article, we are having a div element with some text content in it. Our task is to limit the text length to N lines using CSS.
Syntax
/* For single line truncation */
selector {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* For multi-line truncation */
selector {
display: -webkit-box;
-webkit-line-clamp: N;
-webkit-box-orient: vertical;
overflow: hidden;
}
Approaches to Set the Limit of Text Length to N Lines
Here is a list of approaches to set the limit of text length to N lines using CSS
Method 1: Limiting Text Using white-space Property
In this approach, we will display only a single line of text by setting the limit of text length to first line using CSS overflow, white-space and text-overflow property. We will truncate the rest of the text.
- We have used "overflow: hidden;" CSS property to clip and hide the overflowing content.
- We have used "white-space: nowrap;" CSS property so text is displayed in a single line.
- We have used "text-overflow: ellipsis;" CSS property to display an ellipsis when text overflows.
Example
Here is a complete example code implementing above mentioned steps to set the limit of text length to first line using CSS
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.truncate-single {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #04af2f;
color: white;
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}
</style>
</head>
<body>
<h3>Setting limit of text length to 1 line using CSS</h3>
<div class="truncate-single">
This is a div containing multiple lines of text.
The text visibility is limited to 1 line only.
</div>
</body>
</html>
A green box with white text appears showing "This is a div containing multiple lines of text. The text visibility is limited to 1 line only." truncated to a single line with ellipsis (...) at the end.
Method 2: Limiting Text Using webkit-line-clamp Property
In this approach, we will display three lines of text by setting the limit of text length to first three lines using the -webkit-line-clamp property.
- We have used "-webkit-line-clamp: 3;" CSS property to set the number of lines, here user can see only three lines as we have specified its value to three.
- We have used "overflow: hidden;" CSS property to clip and hide the overflowing content.
- We have used "display: -webkit-box;" and "-webkit-box-orient: vertical;" to enable the line clamping.
Example
Here is a complete example code implementing above mentioned steps to set the limit of text length after third line using CSS
<!DOCTYPE html>
<html>
<head>
<style>
.truncate-multi {
width: 400px;
overflow: hidden;
line-height: 20px;
padding: 10px;
background-color: #04af2f;
color: white;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
border-radius: 5px;
margin: 20px 0;
}
</style>
</head>
<body>
<h3>Setting limit of text length to 3 lines using CSS</h3>
<div class="truncate-multi">
JavaScript is a lightweight, interpreted programming
language. It is commonly used to create dynamic
and interactive elements in web applications.
JavaScript is very easy to implement because it is
integrated with HTML. It is open and cross-platform.
This JavaScript tutorial has been designed for
beginners as well as working professionals to help
them understand the basic to advanced concepts and
functionalities of JavaScript.
</div>
</body>
</html>
A green box with white text appears showing the JavaScript description truncated to exactly 3 lines, with the text automatically cut off after the third line.
Example: Card Component with Text Truncation
This example demonstrates the real-time use of truncating the text to N lines in a card component
<!DOCTYPE html>
<html>
<head>
<style>
.card {
background-color: rgb(58, 57, 57);
color: white;
width: 400px;
height: 80px;
display: flex;
border-radius: 12px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 20px 0;
}
.img {
width: 160px;
height: 70px;
margin-right: 30px;
padding: 5px;
}
img {
width: 100%;
height: 100%;
border-radius: 8px;
}
.content {
padding: 5px;
width: 200px;
height: 70px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<h3>Card with Text Truncation to 4 Lines</h3>
<div class="card">
<div class="img">
<img src="/html/images/test.png" alt="Sample Image">
</div>
<div class="content">
This is an information about the image.
Whatever text will fit to the div, it
will be shown. If the text is more than
the div, then it will be hidden and the
text will be shown as truncated.
</div>
</div>
</body>
</html>
A dark gray card with rounded corners appears containing an image on the left side and white text on the right side. The text content is truncated to exactly 4 lines within the card layout.
Conclusion
In this article, we have learned how to truncate text to N lines using CSS. Use white-space: nowrap with text-overflow: ellipsis for single-line truncation, and -webkit-line-clamp for multi-line truncation in modern browsers.
13K+ Views
