1

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?

Itchydon
  • 2,572
  • 6
  • 19
  • 33
Waseem
  • 577
  • 2
  • 4
  • 18
  • Did you try this one out? https://stackoverflow.com/a/3695438/3377857 – Klemens Morbe Aug 19 '17 at 22:17
  • In order for text overflow to work, the element it is applied to must have a set width/height so it can detect overflow. Also, the element's overflow property should be set to hidden. – SidTheBeard Aug 19 '17 at 22:17
  • @KlemensMorbe it works, but it doesn't show 3 dots at the end. Thank you though, I'll use this as a temporary solution until I find a way to add 3 dots at the end. – Waseem Aug 19 '17 at 22:27

1 Answers1

3

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/

abhinav3414
  • 946
  • 3
  • 9
  • 31