CODEWITHSUNDEEP
htmlcss
Chloe
Chloe

Reputation: 26264

How to I truncate text with ellipsis in a multi-line div using CSS?

How do I truncate text with ellipsis in a multi-line div field? It works when the div is a single line. How do I make it work for multiple lines so it puts ellipsis at the very end in the lower right corner of the div?

<!DOCTYPE html>
<html>
<head>
<style> 
#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

#div2 {
    /*white-space: nowrap; */
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
    height: 3em;
}

</style>
</head>
<body>

<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "white-space: nowrap;":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "height: 3em;":</p>
<div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>

</body>
</html>

Upvotes: 0

Views: 2862

Answers (1)

Chloe
Chloe

Reputation: 26264

This worked without getting too complicated. It doesn't appear to be cross-browser supported though.

.description {
  height: 4.5em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


#div1 {
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
}

#div2 {
    /*white-space: nowrap; */
    width: 12em; 
    overflow: hidden;
    text-overflow: ellipsis; 
    border: 1px solid #000000;
    height: 3em;
}

#div3 {
    width: 12em; 
    border: 1px solid #000000;
    height: 3em;
    line-height: 1em;
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<p>The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.</p>

<p>This div uses "white-space: nowrap;":</p>
<div id="div1">This is some long text that will not fit in the box</div>

<p>This div uses "height: 3em;":</p>
<div id="div2">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>

<p>This is the solution.</p>
<div id="div3">This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box</div>

Upvotes: 2

Related Questions