CSS Text truncation allows you to control how much text overflows its container due to the distortion of the layout at the end of your design, making such text awkward. This is typically accomplished by adding an ellipsis (...) to the end of the text to denote that the text has been truncated. It is also fairly important for responsive design, providing how text fits into variable screen sizes without causing abrupt interruptions in layout. we will look into some of the techniques of text truncation in CSS.
Prerequisites
These are the approaches for text truncation in CSS:
Using text-overflow
CSS property text-overflow is used to determine how overflowed content, that is not displayed, should be signaled to the user. When used in concert with white-space and overflow properties in this manner, text will be truncated on a single line and an ellipsis (...) will be provided after the truncated text.
Syntax:
.truncate-single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Example: Following is an example where there is a text truncate, which will be obtained by using the text-overflow property of CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Text Truncate Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.truncate-single-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 250px;
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
margin: 20px;
font-size: 14px;
color: #333;
border-radius: 5px;
box-shadow: 0 4px 6px
rgba(0, 0, 0, 0.1), 0
0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
.truncate-single-line:hover {
box-shadow: 0 4px 12px
rgba(0, 0, 0, 0.2), 0 0
15px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="truncate-single-line">
This is a long text that will be
truncated with an ellipsis at the end.
</div>
</body>
</html>
Output:
Single line truncation using text-overflowUsing -webkit-line-clamp
The -webkit-line-clamp, combined with other WebKit-prefixed properties allows for the truncation of text after a certain amount of lines. This is quite useful in multi-line text truncation. It contains the text within a defined number of lines and ends it with an ellipsis (...) indicating that there is more to display.
Syntax:
.truncate-multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
}Example: Below is an example of how the property -webkit-line-clamp may be used in CSS to truncate a text having background color as #fff.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Text Truncate Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.truncate-multi-line {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
width: 250px;
background-color: #fff;
border: 1px solid #ddd;
padding: 4px;
margin: 20px;
font-size: 14px;
color: #333;
border-radius: 5px;
box-shadow: 5px 5px 10px
10px rgba(0, 255, 255, 0.2),
0 0 10px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease-in-out;
}
.truncate-multi-line:hover {
box-shadow: 0 4px 12px
rgba(0, 0, 0, 0.2),
0 0 15px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<div class="truncate-multi-line">
This is a long text that will be
truncated with an ellipsis at the
end. This approach works for
multiple lines of text. Here,
the text is limited to three
lines, and any overflow beyond
that will be hidden and replaced
with an ellipsis.
</div>
</body>
</html>
Output:
Multiple Lines Truncation Using -webkit-line-clampUsing CSS Grid
Another method of truncating multi-line text involves the use of CSS Grid to set a maximum number of rows. This is quite similar to the Flexbox method but uses the stronger features of Grid for laying out elements.
Syntax:
.truncate-multi-line-grid {
display: grid;
grid-template-rows: repeat(3, 1.5em);
overflow: hidden;
text-overflow: ellipsis;
}Example: The below example demonstrates how text is truncated using CSS Grid giving background color as #fff.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Text Truncate Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.truncate-grid {
display: grid;
grid-template-rows: repeat(3, 1fr);
overflow: hidden;
text-overflow: ellipsis;
max-height: 4.5em;
line-height: 1.5em;
width: 250px;
background-color: #fff;
border: 1px solid #ddd;
padding: 5px;
margin: 20px;
font-size: 14px;
color: #333;
border-radius: 8px;
box-shadow: 0 8px 16px
rgba(0, 25, 50, 0.5),
0 0 25px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="truncate-grid">
This is a long text that will be
truncated using CSS Grid. This
approach defines the number of rows
and handles
text overflow gracefully, making
it a flexible solution for responsive
design.
</div>
</body>
</html>
Output:
Truncation Using CSS GridConclusion
Text truncation in CSS serves as an important technique for keeping your design clean and professional and also responsive. With the use of 'text-overflow', '-webkit-line-clamp', and possibilities from Flexbox and Grid, it's simple to handle overflowing text. All these methods ensure that content stays visible and clear while being responsive across different screen types and sizes. Each of the above approaches has its merits, and the choice depends on the exact design requirement and the requirement of compatibility with a specific browser. These different CSS techniques together create an interactive and an appealing web experience.
Similar Reads
Primer CSS Truncate
Primer CSS is a CSS framework that comes with pre-styled components and a design language with spacing, typography, and Theming that helps in building a website effectively. This systematic method makes sure our patterns are steady and interoperable with every other. It is created with GitHub’s desi
2 min read
How to truncate text in Angular2?
Approach: It is easy to truncate text in Angular. The truncated text helps us to remove or cut-off portions of text. It abruptly ends the text, reducing the length of the text. It removes text in accordance with the truncate function used. Syntax: String length is greater than the given characters.
2 min read
Primer CSS Truncate Multiple Items
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Lodash _.truncate() Method
The Lodash _.truncate() method of String is used to truncate the stated string if it is longer than the specified string length. The last characters of the string which are truncated are replaced with the stated omission string which is by defaults "...". Syntax:_.truncate([string=''], [options={}])
2 min read
Node.js fs.truncate() Method
The fs.truncate() method in node.js is used to change the size of the file i.e either increase or decrease the file size. This method changes the length of the file at the path by len bytes. If len represents a length shorter than the file's current length, the file is truncated to that length. If i
2 min read
CSS Introduction
CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable. It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
5 min read
Bootstrap 5 Text Truncation
Bootstrap 5 is a catalog of UI components that enables developers to develop their websites and applications in less time by using the pre-built components and utility classes. This article will see Bootstrap 5 Text truncation. Text Truncation is used to truncate long statements and paragraphs using
2 min read
How to Transform Text to Uppercase in CSS?
To transform text to uppercase in CSS, you can use the text-transform property. This property allows you to control the capitalization of text visually, without altering the original content in the HTML markup. By setting text-transform: uppercase; all text within the specified HTML element will dis
2 min read
CSS text-rendering
Text-rendering is a property that allows you to choose what to optimize when rendering text. It sends the information to the rendering engine about what to optimize for while rendering text. It's actually not a CSS property and is not defined in any CSS standard. It's an SVG property but Gecko and W
2 min read
CSS hanging-punctuation Property
The hanging-punctuation property in CSS provides web designers with some upper hand over typography on the webpage. The hanging punctuation property specifies whether a punctuation mark is placed outside the line box at the start or at the end of some line of text.Basically, It provides the web desi
2 min read