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.