Krestek Krestek - 1 month ago 14
HTML Question

Is it possible to show dots '...' instead of letting text continue after the end of div?

This is the example:

<style>
div {
background-color: skyblue;
height: 100px;
}

.posttext {
word-wrap: break-word;
-ms-hyphenate-limit-lines: 10;
text-overflow: ellipsis;
}
</style>
<div>
<p class="posttext">---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8---------9---------0---------1---------2---------3---------4---------5---------6---------7---------8--------</p>
</div>


When you decrease the width of your browser enough the text will continue to show under the blue colored div. I found a way to stop it using 'text-overflow: ellipsis' but it stops at the first line.
Is it possible to make it continue until it reaches the height of the div and then show three dots at the end rather than continuing under it?

Answer Source

Below properties are useful when you want to show ellipsis at the end of single line.

div {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

Since you are looking for multi line ellipsis (which is not directly available in CSS), I think below link might help you :
https://codepen.io/martinwolf/pen/qlFdp

There is also one Jquery plugin available which can be used :
https://tpgblog.com/threedots/