CSS out of range display ellipsis
CSS Overrun Ellipses
In web development, we often encounter situations where text is too long and exceeds the boundaries of its container. To achieve aesthetics and save space, we can use CSS to control the display effect of the overrunning portion. The most common method is to use ellipses to indicate truncated text. This article will detail how to use CSS to achieve the overrun ellipses effect.
1. Displaying Ellipses When Text Exceeds the Container Width
When text exceeds the container width, we can use text-overflow: ellipsis to display an ellipsis effect for single-line text. Also, set white-space: nowrap and overflow: hidden to ensure that the text does not wrap and that the excess text is hidden.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Single Line Text Ellipsis</title>
<style>
.ellipsis {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="ellipsis">This is a long text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
2. Multi-line text overflows with ellipsis
To achieve ellipsis for multi-line text, we can combine -webkit-line-clamp with display: -webkit-box. Note that this method only works in WebKit browsers like Chrome and Safari.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi Line Text Ellipsis</title>
<style>
.ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
</style>
</head>
<body>
<div class="ellipsis">This is a long text that will be truncated with an ellipsis. text that will be truncated with an ellipsis.</div>
</body>
</html>
Output:
3. Dynamically Calculate the Ellipsis Position Using JavaScript
Sometimes, we need to dynamically calculate the ellipsis position based on the text content and container width. In this case, we can use JavaScript to achieve this effect.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Ellipsis Position</title>
<style>
.ellipsis {
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="ellipsis" id="dynamicEllipsis"></div>
<script>
const text = "This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.";
const container = document.getElementById('dynamicEllipsis');
container.textContent = text;
const containerWidth = container.offsetWidth;
const textWidth = container.scrollWidth;
if (textWidth > containerWidth) {
const ellipsisWidth = container.offsetWidth;
const ellipsisText = '...';
let newText = text;
while (container.scrollWidth > containerWidth) {
newText = newText.slice(0, -1);
container.textContent = newText + ellipsisText;
}
}
</script>
</body>
</html>
Output:
4. Using CSS Grid to Implement Dynamic Ellipses
Another way to achieve dynamic ellipsis positioning is to use CSS Grid layout. By setting the grid-template-columns and grid-auto-flow properties, we can dynamically calculate the ellipsis position.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Ellipsis Position with CSS Grid</title>
<style>
.container {
display: grid;
grid-template-columns: auto 1fr;
grid-auto-flow: column;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container" id="dynamicEllipsisGrid"></div>
<script>
const text = "This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.";
const container = document.getElementById('dynamicEllipsisGrid');
container.textContent = text;
const containerWidth = container.offsetWidth;
const textWidth = container.scrollWidth;
if (textWidth > containerWidth) {
const ellipsisWidth = container.offsetWidth;
const ellipsisText = '...';
let newText = text;
while (container.scrollWidth > containerWidth) {
newText = newText.slice(0, -1);
container.textContent = newText + ellipsisText;
}
}
</script>
</body>
</html>
Output:
5. Using CSS Flexbox to Implement Dynamic Ellipsis Positioning
In addition to CSS Grid layout, we can also use CSS Flexbox layout achieves dynamic ellipsis position. By setting the flex-direction: row and flex-wrap: nowrap properties, we can achieve the effect of dynamically calculating the ellipsis position.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Ellipsis Position with CSS Flexbox</title>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container" id="dynamicEllipsisFlexbox"></div>
<script>
const text = "This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.";
const container = document.getElementById('dynamicEllipsisFlexbox');
container.textContent = text;
const containerWidth = container.offsetWidth;
const textWidth = container.scrollWidth;
if (textWidth > containerWidth) {
const ellipsisWidth = container.offsetWidth;
const ellipsisText = '...';
let newText = text;
while (container.scrollWidth > containerWidth) {
newText = newText.slice(0, -1);
container.textContent = newText + ellipsisText; }
}
</script>
</body>
</html>
Output:
6. Use the CSS Clamp function to achieve dynamic ellipsis positioning
The CSS Clamp function is a new function in CSS3 that can achieve the effect of dynamically calculating the ellipsis position. The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Ellipsis Position with CSS Clamp</title>
<style>
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="container" id="dynamicEllipsisClamp">This is a long </div>
</body>
</html>
Output:
7. Using JavaScript Libraries to Implement Dynamic Ellipses
In addition to the native clamp.js library can be used to easily display ellipsis for multiple lines of text.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Ellipsis Position with Clamp.js</title>
<style>
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="container" id="dynamicEllipsisClampJs">This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.</div>
<script src="https://cdn.jsdelivr.net/npm/clamp-js@0.11.0/dist/clamp.min.js"></script>
<script>
const element = document.getElementById('dynamicEllipsisClampJs');
$clamp(element, { clamp: 3 });
</script>
</body>
</html>
Output:
8. Dynamic Ellipses Positioning with CSS Grid and JavaScript
By combining CSS Grid layout and JavaScript, we can achieve more flexible dynamic ellipsis positioning. By dynamically calculating the text content and container width, we can achieve an adaptive ellipsis display effect.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Ellipsis Position with CSS Grid and JavaScript</title>
<style>
.container {
display: grid;
grid-template-columns: auto 1fr;
grid-auto-flow: column;
white-space: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container" id="dynamicEllipsisGridJs"></div>
<script>
const text = "This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.";
const container = document.getElementById('dynamicEllipsisGridJs');
container.textContent = text;
const containerWidth = container.offsetWidth;
const textWidth = container.scrollWidth;
if (textWidth > containerWidth) {
const ellipsisWidth = container.offsetWidth;
const ellipsisText = '...';
let newText = text;
while (container.scrollWidth > containerWidth) {
newText = newText.slice(0, -1);
container.textContent = newText + ellipsisText; }
}
</script>
</body>
</html>
Output:
9. Dynamically Positioning Ellipses Using CSS Flexbox and JavaScript
Similar to CSS Grid Layout, we can also combine CSS Flexbox Layout and JavaScript to achieve dynamic ellipsis positioning. By dynamically calculating the text content and container width, we can achieve an adaptive ellipsis display effect.
The sample code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Ellipsis Position with CSS Flexbox and JavaScript</title>
<style>
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container" id="dynamicEllipsisFlexboxJs"></div>
<script>
const text = "This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis. This is a long text that will be truncated with an ellipsis.";
const container = document.getElementById('dynamicEllipsisFlexboxJs');
container.textContent = text;
const containerWidth = container.offsetWidth;
const textWidth = container.scrollWidth;
if (textWidth > containerWidth) {
const ellipsisWidth = container.offsetWidth;
const ellipsisText = '...';
let newText = text;
while (container.scrollWidth > containerWidth) {
newText = newText.slice(0, -1);
container.textContent = newText + ellipsisText; }
}
</script>
</body>
</html>
Output:
10. Summary
Through this article, we learned how to use CSS to create an out-of-view ellipsis effect. Whether it’s for single-line or multi-line text, we can achieve dynamic ellipsis positioning by setting appropriate CSS properties and combining them with JavaScript.