Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 diifferent 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.
Approaches to Set the Limit of Text Length to N Lines
Here is a list of approaches of how to Set Color of Progress Bar using HTML and CSS with step wise explaination and complete example codes.
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 diaplayed 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>
<title>
Set the limit of text length to N lines using CSS
</title>
<style>
div {
height: auto;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: #04af2f;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h3>
Setting limit of text length to N lines
using CSS
</h3>
<p>
In this example we have used CSS
text-overflow property to limit text length
to 1 line using CSS.
</p>
<div>
This is a div containing multiple lines of text.
The text visibility is limited to 1 line only.
</div>
</body>
</html>
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.
- 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 it's value to three.
- We have used "overflow: hidden;" CSS property to clip and hide the overflowing content.
- We have used "text-overflow: ellipsis;" CSS property to display an ellipsis when text overflows.
Example 1
Here is a complete example code implementing above mentioned steps to set the limit of text length after third line line using CSS.
<html>
<head>
<title>
Set the limit of text length to N lines using CSS
</title>
<style>
div {
overflow: hidden;
text-overflow: ellipsis;
line-height: 20px;
max-height: 100px;
padding: 4px 10px;
max-width: 400px;
background-color: #04af2f;
color: white;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<h3>
Setting limit of text length to N lines
using CSS
</h3>
<p>
In this example we have used -webkit-line-clamp
property to limit text after 3 ines using CSS.
</p>
<div>
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>
Example 2
This example demonstrate the real-time use of truncating the text to N lines.
- We have created the card component using HTML and CSS.
- We have added image on left of the card and the text on the right where width of the card is fixed.
We will be displaying the text on the right side of the card without overflowing the text. We have truncated the texts into four lines which we can see in the output.
Here is a complete example code implementing above mentioned steps to set the limit of text length after fourth line for clean card design.
<html>
<head>
<title>
Set the limit of text length to N lines using CSS
</title>
<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),
0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: left;
justify-content: center;
}
.img {
width: 160px;
height: 70px;
margin-right: 30px;
padding: 5px;
}
img {
width: 100%;
height: 100%;
}
.content {
padding:5px;
width: 450px;
height: 70px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<h3>
Setting limit of text length to N lines
using CSS
</h3>
<p>
In this example we have used -webkit-line-clamp
property to limit text after 3 ines using CSS.
</p>
<div class="card">
<div class="img">
<img src="/https/www.tutorialspoint.com/html/images/test.png" alt="img">
</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 ellipsis.
</div>
</div>
</body>
</html>
Conclusion
In this article, we have learned and understood how to truncate the text into multiple lines. We can truncate the text using the 'overflow: hidden' and 'text-overflow: elipsis' CSS properties. Furthermore, we require to use the 'white-space: no-wrap' to truncate text in a single line and the 'webkit-line-clamp: lines' CSS property to truncate texts into multiple lines.
13K+ Views
