3

I tried the following code:

#my-div{
    background-color: lightblue;
    display: inline-block;
    width: 200px;
    
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
<html>
  <body>
    <div id="my-div">The quick brown fox jumps over the lazy dog</div>
  </body>
</html>

As you notice, the 3 dots replaces the last part of the sentence in the div because of the overflow. How can I reverse that behavior? Is it possible to replace the first part of the sentence with 3 dots (i.e. hide the overflow from the beginning NOT the end)?

Ahmed Hussein
  • 715
  • 1
  • 15
  • 38
  • You might find some ideas here: 1) [Text-overflow ellipsis on left side](https://stackoverflow.com/questions/9793473/text-overflow-ellipsis-on-left-side), 2) [overflow to truncate from the left](https://stackoverflow.com/questions/12761418/i-need-an-overflow-to-truncate-from-the-left-with-ellipses), and 3) [reverse ellipsis](https://hugogiraudel.com/2014/12/16/css-riddle-reverse-ellipsis/) – showdev Jul 19 '17 at 22:49
  • Have a look at [this](http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/) – Aakash Verma Jul 20 '17 at 11:06

1 Answers1

2

Just add text-align: left; and direction: rtl; in CSS, it will work.

https://codepen.io/anon/pen/eRwoGZ

CSS

#my-div{
    background-color: lightblue;
    display: inline-block;
    width: 200px;
    text-align: left;
    direction: rtl;

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

HTML

<html>
  <body>
    <div id="my-div">The quick brown fox jumps over the lazy dog</div>
  </body>
</html>
Rahul Kumar
  • 2,184
  • 3
  • 24
  • 46
  • This works for me in Firefox 54 and Chrome 59, but not in Safari 10.1.1. – showdev Jul 19 '17 at 22:57
  • Just export from my codepen and open in safari. It is working. – Rahul Kumar Jul 19 '17 at 23:00
  • Ok, but this ONLY works when the div allows only one line. My div needs to have certain number of lines (depending on its height) and after filling those lines, the overflow begins. How to do it? – Ahmed Hussein Jul 19 '17 at 23:09