How to Apply an Ellipsis to Multiline Text in CSS ?
In this article, we will see how to apply an ellipsis to multi-line text which can be done using two approaches.
Ellipsis refers to three dots and it is the most user-friendly UI modification that lets the user know that there was some more information that is being truncated due to lack of space.
Approach:
- By default, the white-space: nowrap and overflow: hidden are absolutely necessary as the first one is responsible to hold all the text in one line and the second one hides what overflows.
- Now if you want to have the ellipsis after two or three lines then you have to use either use display: -webkit-box layout mode or display: -moz-box mode and this approach is shown in the second example.
Syntax:
selector { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
Used Properties:
- text-overflow: This property is used to add the ellipsis at the end of the truncated part by setting its own value to “ellipsis”.
- white-space: This property is used to accumulate all the white space into one and does not let the line go to the next one, by setting its value to “nowrap”.
- overflow: This property is used to hide the overflow of the text outside the container.
Example 1: The code below demonstrates how we can apply the first approach which is the default way of implementing the ellipsis.
HTML
<!DOCTYPE html> < html > < head > < title > Applying an ellipsis to multiline text </ title > < style > .container { width: 35rem; height: 12rem; padding: 1rem; margin: 5rem; padding-bottom: 5rem; background-color: lightgreen; } .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < h3 > Applying an ellipsis to multiline text </ h3 > < div class = "container" > < div class = "text" > This is a card and this one truncates only uptill one line which is the default truncation of ellipsis. </ div > </ div > </ body > </ html > |
Output:
Example 2: The code below demonstrates how we can apply the second approach where we will use display: -webkit-box layout mode of implementing the ellipsis after multiple lines:
HTML
<!DOCTYPE html> < html > < head > < title > Applying an ellipsis to multiline text </ title > < style > .box{ display: flex; flex-direction: row; } .container { width: 12rem; height: 12rem; padding: 1rem; margin: 3rem; padding-bottom: 5rem; background-color: lightgreen; } .text-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .text-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ h1 > < h3 > Applying an ellipsis to multiline text </ h3 > < div class = "box" > < div class = "container" > < div class = "text-2" > This is the first card and this one and this one truncates upto two lines. </ div > </ div > < div class = "container" > < div class = "text-3" > This is the first card and this one and this one truncates upto three lines. </ div > </ div > </ div > </ body > </ html > |
Output: