Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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
Sometimes, developers require to truncate the texts according to the dimensions of the HTML element. For example, the width of the div element is 100px, and it can contain only some characters. So, we need to truncate the texts using CSS.
However, we can truncate the text using JavaScript, but it can cause a problem. For example, we can show 18 characters in 100px, but sometimes due to the capitalization of characters, it can show fewer characters. In such a case, if we show 18 characters, it can overflow.
So, it is a better idea to truncate the text using CSS.
Syntax
Users can follow the syntax below to set the text limit to N lines using CSS.
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
In the above syntax, we set the overflow hidden, ‘text-overflow: elipsis’ to truncate the text. The value of the ‘-webkit-line-clamp’ property shows the number of lines to show.
Example 1
In the example below, we show only a single line of text. We will truncate other text. We have set the 300px as the width of the div element, hidden to overflow, and ellipsis to text-overflow property. Also, we used the ‘white-space’ property with the ‘no-wrap’ value to show text only in a single line.
<html>
<head>
<style>
div {
height: auto;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background-color: red;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Limiting the text length to 1 line using CSS</h2>
<div>This is a div containing multiple lines of text. The text visibility is limited to 1 line only.</div>
</body>
</html>
Example 2
In the example below, we show the N lines of truncated text. We have added text to the div element as in the first example. After that, we used the ‘webkit-line-clamp’ CSS property to set the number of lines rather than using the ‘white-space: no-wrap’ CSS property.
In the output, users can observe that it shows only three lines with truncated text. Users can change the number of lines and observe the output.
<html>
<head>
<style>
div {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 20px;
max-height: 100px;
padding: 4px 10px;
max-width: 400px;
background-color: aqua;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<h3>Limiting the text length to N line using CSS</h3>
<div>Git is a popular version control system used to track changes in code or other files. It allows multiple
developers to work on the same project simultaneously, without overwriting each other's changes. Git uses a
distributed architecture, which means that each developer has their own local copy of the repository, and
changes can be easily merged together.</div>
</body>
</html>
Example 3
In the example below, we will demonstrate the real-time uses of truncating the text to N liens. Here, we have created the card component using HTML and CSS. We added the image on the left of the card and the text on the right. Furthermore, the width of the card is fixed.
We require to show the text on the right part of the card without overflowing the text. We have truncated the texts into 4 lines which we can see in the output.
<html>
<head>
<style>
.card {
background-color: grey;
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: 130px;
height: 70px;
margin-right: 30px;
padding: 5px;
}
img {
width: 100%;
height: 100%;
}
.content {
width: 450px;
height: 70px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<h2>Limiting the text length to N line using CSS</h3>
<div class = "card">
<div class = "img">
<img src = "https://img.freepik.com/free-photo/grunge-paint-background_1409-1337.jpg" 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>
Users learned 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.
9K+ Views
