Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Display Ellipsis in the span Element Having Hidden Overflow?
The <span> element is a generic inline container used for styling text portions and grouping inline content. When text content within a <span> element overflows its container boundaries, it can disrupt the layout. The ellipsis (...) provides a visual indicator that text has been truncated, maintaining clean layout while showing that more content exists.
Displaying ellipsis in a span element requires combining CSS properties for overflow handling and text truncation. This technique is essential for responsive designs where text must fit within fixed-width containers.
Syntax
Following is the basic syntax for a span element
<span>Text content</span>
Following is the CSS syntax for displaying ellipsis with hidden overflow
span {
display: inline-block;
width: [fixed-width];
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Required CSS Properties
To display ellipsis in a span element with hidden overflow, the following CSS properties must work together
-
display: inline-block Converts the inline span to accept width and height properties while maintaining inline behavior.
-
width Sets a fixed width where the ellipsis will appear when text overflows.
-
white-space: nowrap Prevents text from wrapping to multiple lines.
-
overflow: hidden Hides content that exceeds the container boundaries.
-
text-overflow: ellipsis Displays three dots (...) when text is clipped.
Single Line Ellipsis
The most common use case is displaying ellipsis when text exceeds a single line within a fixed-width container.
Example
Following example demonstrates single-line text truncation with ellipsis
<!DOCTYPE html>
<html>
<head>
<title>Single Line Ellipsis in Span</title>
<style>
.truncate-span {
display: inline-block;
width: 300px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #f0f8ff;
border: 2px solid #4682b4;
padding: 8px;
margin: 10px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Single Line Text Truncation</h3>
<p>Original text: "<span class="truncate-span">This is a very long sentence that will be truncated with ellipsis when it exceeds the container width</span>"</p>
<p>Short text: "<span class="truncate-span">Short text</span>"</p>
</body>
</html>
The output shows the long text truncated with ellipsis, while short text displays completely
Single Line Text Truncation Original text: "This is a very long sentence that will be truncated with ellipsis when it exceeds the..." Short text: "Short text"
Multi-line Ellipsis
For multi-line text truncation, additional CSS properties using webkit prefixes are required. This technique works primarily in webkit-based browsers.
Example
Following example demonstrates multi-line text truncation with ellipsis
<!DOCTYPE html>
<html>
<head>
<title>Multi-line Ellipsis in Span</title>
<style>
.multiline-truncate {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
background-color: #ffe4e1;
border: 2px solid #cd5c5c;
padding: 10px;
margin: 10px 0;
line-height: 1.4;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Multi-line Text Truncation</h3>
<span class="multiline-truncate">
This is a longer paragraph that demonstrates multi-line text truncation.
The text will wrap to multiple lines and show ellipsis at the end of the
third line when the content exceeds the specified number of lines.
This technique is useful for creating card layouts and previews.
</span>
</body>
</html>
The output displays text across multiple lines with ellipsis at the end
Multi-line Text Truncation This is a longer paragraph that demonstrates multi-line text truncation. The text will wrap to multiple lines and show ellipsis at the end of the third line when the content exceeds the specified number of...
Dynamic Width Ellipsis
Using percentage-based widths or flexbox, you can create responsive ellipsis that adapts to different screen sizes.
Example
Following example shows responsive ellipsis using flexbox
<!DOCTYPE html>
<html>
<head>
<title>Responsive Ellipsis in Span</title>
<style>
.container {
display: flex;
align-items: center;
max-width: 400px;
border: 2px solid #20b2aa;
padding: 10px;
margin: 10px 0;
}
.label {
flex-shrink: 0;
margin-right: 10px;
font-weight: bold;
color: #20b2aa;
}
.content {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background-color: #f0ffff;
padding: 5px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Responsive Ellipsis Layout</h3>
<div class="container">
<span class="label">Title:</span>
<span class="content">This is a very long title that will be truncated based on available space</span>
</div>
<div class="container">
<span class="label">Description:</span>
<span class="content">A comprehensive guide to web development</span>
</div>
</body>
</html>
The content spans adjust their width based on available space, showing ellipsis when necessary
Responsive Ellipsis Layout Title: This is a very long title that will be truncated based on... Description: A comprehensive guide to web development
Browser Compatibility
The single-line ellipsis method using text-overflow: ellipsis is supported across all modern browsers. However, multi-line ellipsis using -webkit-line-clamp has the following compatibility
| Property | Support | Notes |
|---|---|---|
| text-overflow: ellipsis | All modern browsers | Fully supported for single-line truncation |
| -webkit-line-clamp | Webkit-based browsers | Chrome, Safari, Edge (Chromium), Firefox 68+ |
| -webkit-box-orient | Webkit-based browsers | Required for multi-line ellipsis |
Common Use Cases
Ellipsis in span elements is commonly used for
-
Navigation menus Truncating long menu item names
-
Card layouts Showing preview text in content cards
-
Table cells Preventing table layout breakage with long content
-
Breadcrumbs Shortening long path names
-
User profiles Displaying truncated bio or description text
Conclusion
Displaying ellipsis in span elements with hidden overflow requires combining display: inline-block, overflow: hidden, white-space: nowrap, and text-overflow: ellipsis properties. For multi-line truncation, use -webkit-line-clamp with display: -webkit-box. This technique maintains clean layouts while indicating that additional content exists beyond the visible area.
2K+ Views
