CSS Ellipsis
The CSS ellipsis kind of is the value that mostly is used by the property: text-overflow.
Here, we will discuss the following:
What is CSS Ellipsis?
Syntax for CSS ellipsis
How to use CSS Ellipsis?
How CSS ellipsis value is used by text-overflow property?
Why text-overflow ellipsis doesn’t work?
Examples
What is CSS Ellipsis?
- As a result of using this keyword value, an ellipsis will for the most part appear (''...\', U+2026 HORIZONTAL ELLIPSIS) to represent clipped text.
- Therefore the most part is an ellipsis displayed inside the content area, which reduces the amount of displayed text.
- A clipped ellipsis appears if there is not enough space to display it.
- An area of the text specifically is clipped and is represented as \'...\'.
- The text-overflow property specifies how users should mostly be notified when there specifically is content that is overflowing and cannot mostly be displayed.
- The text can be clipped, displayed with an ellipsis (...), or displayed with a custom string.
Syntax for CSS ellipsis
text-overflow: clip | ellipsis | string | initial | inherit;
text-overflow: ellipsis;
JavaScript syntax
object.style.textOverflow="ellipsis"
How to use CSS ellipsis?
- For clipping at the transition between characters, you will need to specify text-overflow as an empty string, if that is supported in your browser: text-overflow: ‘‘;
- As part of the context, this keyword value will show an ellipsis ('...' , U+2026 HORIZONTAL ELLIPSIS ) to indicate that the text has been clipped.
How CSS ellipsis value is used by text-overflow property?
| Value | Description |
| ellipsis | A clipped text ellipsis ("...") should be drawn to represent it. |
Why text-overflow ellipsis doesn’t work?
- When the following conditions literally are true, text-overflow:ellipsis will work:
- The width of an element must mostly be expressed in pixels (px) in a major way. The width in percent % (percentage) will not work.
- A CSS literally attribute overflow:hidden and a white-space:nowrap must be applied to the element.
- The text-overflow: ellipsis doesn’t work if we don’t particularly follow the above two conditions.
Examples
Some codes or examples related to CSS ellipsis.
Example 1:
The following example illustrates how to use the text overflow property with its value set to ellipsis.
Code is as follows:
<!DOCTYPE html>
<html>
<head>
<title> CSS text-overflow property using ellipsis </title>
<style type="text/css">
div {
width: 450px;
font-size: 45px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div> Javatpoint: A computer science portal for Javatpoint. </div>
</body>
</html>
The output of the above code is:
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div.b {
white-space: nowrap;
width: 55px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>The text-overflow ellipsis Property</h1>
<p>The following div contains a <br> text that will show how ellipsis works </p>
<h2>text-overflow: ellipsis:</h2>
<div class="b">How are you ?</div>
</body>
</html>
The output of the above code is:
Example 3
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: whitesmoke;
}
#myDIV {
height:300px;
background-color: lightcyan;
}
#myDIV2 {
width:210px;
white-space: nowrap;
overflow: hidden;
border:2px solid;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<h1>The text-overflow ellipsis</h1>
<div id="myDIV">
<div id="myDIV2">The text overflow property, using ellipsis value is as follows.</div>
</div>
</body>
</html>
The output of the above code is:
Example 4
A text overflow with a hover effect (shows the whole text when hovered):
Code is follows:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
white-space: nowrap;
width: 110px;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid black;
}
div.a:hover {
overflow: visible;
}
</style>
</head>
<body>
<h1>The text-overflow Property with ellipsis value</h1>
<p> To see the entire text, hover over the div below. </p>
<div class="a">This will show some long text which is not fit in box. </div>
</body>
</html>
The output of the above code is:
