Example
Use of the text-overflow property:
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.
Both of the following properties are required for text-overflow:
- white-space: nowrap;
- overflow: hidden;
Show demo ❯
clip |
no |
no. Read about animatable |
CSS3 |
object.style.textOverflow="ellipsis" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -o- specify the first version that worked with a prefix.
text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
CSS Syntax
text-overflow: clip|ellipsis|string|initial|inherit;
Property Values
clip | Default value. The text is clipped and not accessible | Demo ❯ |
ellipsis | Render an ellipsis ("...") to represent the clipped text | Demo ❯ |
string | Render the given string to represent the clipped text | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
More Examples
Example
Text-overflow with a hover effect (show entire text on hover):
div.a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
div.a:hover {
overflow: visible;
}
Try it Yourself »
Related Pages
CSS tutorial: CSS Text Effects
HTML DOM reference: textOverflow property
Home » CSS
Using CSS, it is possible to limit the text length to N lines using CSS. This concept is known as line clamping or multiple line truncating. Here, we will learn how we can limit text length to n lines using the line-clamp property.
Submitted by
Apurva Mathur, on May 25, 2022
The best solution to this problem is using the line-clamp property of CSS. The line-clamp property shortens text at a specific number of lines. It is defined as shorthand for max-lines and block-overflow.
Syntax:
.line { line-clamp: [none|<integer>]; }The combination of line-clamp property with overflow-hidden value helps to limit the text length.
Lets us see via an example:
Example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .line { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; /* number of lines to show */ line-clamp: 1; -webkit-box-orient: vertical; } .block{ height:40%; width:20%; background-color: #b3d4fc; } </style> <body> <div class="block"> <h2>BLOCK</h2> <p class="line">You must be the change you wish to see in the world." - Gandhi. "Live for what's worth dying for, and leverage technology to create the world you wish to see</p> </div> </body> </html>Output:
As we can see the text line is limited to 1 in the example. If we want to change this limit we can directly do it by changing the following values according to our preference.
-webkit-line-clamp: 5; line-clamp: 5;Output: After replacing the values in the code
Note: -webkit-line-clamp, line-clamp the value which you are assigning should be the same for both.
CSS Tutorial & Examples »