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

Question

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>

Possible duplicate of [Applying an ellipsis to multiline text](https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text) — jonrsharpe, Nov 30 '17 at 18:53
Honestly I think this ( https://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines ) is a better duplicate. Honestly it did not show up when writing the question. — Chloe, Nov 30 '17 at 19:20

Chloe · Accepted Answer · 2018-11-15T18:15:39.853

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>

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

1 Answers1