- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make Ellipsis to multiline text in CSS?
The CSS has no property for ellipsis on multiline text, but we can still achieve the desired result. However, let us first see how to create Ellipsis to a single line text.
Make Ellipsis to a single line text
To make Ellipsis, we need to use the text-overflow property with the value ellipsis i.e −
text-overflow: ellipsis;
Example
Let us now see the complete example −
<!DOCTYPE html>
<html>
<head>
<style>
div.b {
white-space: nowrap;
width: 80px;
overflow: hidden;
text-overflow: ellipsis;
border: 2px solid blue;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<div class="b">This is a demo text</div>
</body>
</html>
Output
Make Ellipsis to a multiline text
To allow ellipsis to multiline text, first set the div with the following CSS property. The height set here is for the entire paragraph. The overflow is hidden to avoid any overflow after the specified height of the paragraph −
.mydiv {
position: relative;
display: block;
width: 28em;
height: calc(2em + 5px);
overflow: hidden;
white-space: normal;
}
Then the span mytext is set with the word-break property. The word-break property lay down how the words should break on reaching the end of a line. The max-height is also set −
.mytext {
word-break: break-all;
position: relative;
display: block;
max-height: 3em;
}
Finally, the ellipsis property is set using the right and top CSS properties −
.myelli {
position: absolute;
right: 0;
top: calc(4em + 2px - 100%);
text-align: left;
background: white;
}
Example
Let us now see the complete example −
<!DOCTYPE html>
<html>
<head>
<style>
.mydiv {
position: relative;
display: block;
width: 28em;
height: calc(2em + 5px);
overflow: hidden;
white-space: normal;
}
.mytext {
word-break: break-all;
position: relative;
display: block;
max-height: 3em;
}
.myelli {
position: absolute;
right: 0;
top: calc(4em + 2px - 100%);
text-align: left;
background: white;
}
</style>
</head>
<body>
<h1>Implementing Multiline Ellipsis</h1>
<div class="mydiv">
<span class="mytext">
Aliquam erat volutpat. Vestibulum at nulla mollis, tristique odio in,
lobortis libero. Nulla in viverra sem. Sed sed cursus justo, ac sodales nisl.
Pellentesque posuere metus egestas arcu accumsan aliquet. Donec ac dui eu nibh
euismod sodales sit amet sed libero. Ut id vehicula eros. Nam fringilla lectus
tincidunt, efficitur metus a, vestibulum tortor. Proin tincidunt dui vel dui maximus
tincidunt. Quisque quis tortor tellus. Sed molestie, quam convallis sodales maximus,
nunc justo volutpat quam, consequat fermentum dolor ipsum non massa.
<div class="myelli">...</div>
</span>
</div>
</body>
</html>
Output
3K+ Views
