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
Selected Reading
Determine how overflowed content that is not displayed is signaled to users with CSS
The text-overflow property is used to determine how overflowed content that is not displayed is signaled to users with CSS. It controls the visual indication when text content exceeds its container's boundaries.
Syntax
selector {
text-overflow: value;
}
Possible Values
| Value | Description |
|---|---|
clip |
Text is clipped and no indication is shown (default) |
ellipsis |
Text is clipped and an ellipsis (...) is displayed |
string |
Custom string to represent clipped text (limited browser support) |
Example
The following example demonstrates both clip and ellipsis values for the text-overflow property −
<!DOCTYPE html>
<html>
<head>
<style>
.original {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
.text1 {
white-space: nowrap;
width: 300px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
padding: 8px;
margin: 10px 0;
}
.text2 {
white-space: nowrap;
width: 300px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
padding: 8px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="original">
<b>Original Text:</b>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content.</p>
</div>
<b>Text overflow: clip</b>
<p class="text1">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content.</p>
<b>Text overflow: ellipsis</b>
<p class="text2">Tutorials Point originated from the idea that there exists a class of readers who respond better to online content.</p>
</body>
</html>
The original text displays in full within a bordered container. The first example with text-overflow: clip shows the text cut off abruptly at the container edge. The second example with text-overflow: ellipsis shows the text truncated with three dots (...) indicating more content exists.
Key Points
For text-overflow to work properly, the following conditions must be met −
- The element must have
overflow: hiddenset - The element must have
white-space: nowrapfor single-line text - The element must have a defined width or max-width
Conclusion
The text-overflow property provides a clean way to handle content that exceeds container boundaries. The ellipsis value is commonly used in UI design to indicate truncated content while maintaining layout integrity.
Updated on: 2026-03-15T12:05:12+05:30
181 Views
Advertisements