4

I have div with overflow:hidden and some text in it, last line is visible halfway. What should I do to hide this last line from div? Or even add some ellipsis.

Is is possible to do this with css only? (I don't want to change font size, or change display:hidden)

For example: (http://jsfiddle.net/xp32ekqc/)

html:

<div>
    Hello World, Hello World, Hello Booom
</div>

style: 

div {
    height:100px;
    width:50px;
    overflow:hidden;
    border:1px solid black;
}

I'd like to see all text without "Boom" or instead of Hello Boom - Hel...

Mimouni
  • 3,564
  • 3
  • 28
  • 37
Marcin Doliwa
  • 3,639
  • 3
  • 37
  • 62
  • 2
    Change the font size? Change the box size? Change the overflow? Use js to calculate what's visible and strip the rest? There's many ways. Guess you need to be more specific. – m02ph3u5 Oct 06 '15 at 12:50
  • Do you want something like an ellipsis with a "Read more" / "Read less" button? – Jay Oct 06 '15 at 12:54
  • Try like this http://jsfiddle.net/xp32ekqc/1/ – Ihor Tkachuk Oct 06 '15 at 12:58
  • @Pearson Doubt that's usable for OP since `-webkit-line-clamp: 3;` is a fixed number and the content does not look static. – timo Oct 06 '15 at 13:01
  • @Pearson Do you know how can I use it in other browsers? – Marcin Doliwa Oct 06 '15 at 13:14
  • @Marcin Doliwa you can manage it with **line-height** though – Himesh Aadeshara Oct 06 '15 at 13:20
  • Yep you need to have an height that'd be a multiple of line height (see _vertical rythm_ also) like 60px = 20px x 3 lines. If font size was 15px then set `line-height: 1.333` (unitless) to have a line height of 20px – FelipeAls Oct 06 '15 at 13:23
  • 1
    Possible duplicate of [css ellipsis on second line](http://stackoverflow.com/questions/5269713/css-ellipsis-on-second-line) and also [see this answer](http://stackoverflow.com/a/18458345/1355315) – Abhitalks Oct 06 '15 at 13:25
  • take a look about text-overflow:ellipsis; other way using jquery – Mimouni Oct 15 '15 at 10:04
  • see i give one example in answer may be it will help you if you want any help let me know – Keval Bhatt Oct 16 '15 at 12:22

2 Answers2

1

Hi i am facing same issue,if your text is in one line then text overflow working fine but now your doing something different i.e you want ...... after 4 or 5 line so you have to apply ellipsis in height.

see this example: 

div {
    height:90px;
    width:50px;
    overflow:hidden;
    border:1px solid black;
}

.myDiv{
  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
<div class="myDiv">
    Hello World, Hello World, Hello Booom
</div>

As you can see in above example -webkit-line-clamp:5; so it will add .... at 5 line.

Note: What is -WebKit

WebKit is a HTML/CSS web browser rendering engine for Safari/Chrome.

List of rendering engine for Web browser

  • IE
    • Engine: [Trident][2]
    • CSS-prefix: -msie
  • Firefox
    • Engine: [Gecko][3]
    • CSS-prefix: -moz
  • Opera
    • Engine: [Presto][4]
    • CSS-prefix: -o
  • Safari & Chrome
    • Engine: [WebKit][5]
    • CSS-prefix: -webkit

So for Safari/Chrome use -webkit in css and for other browser use css-prefix as mentioned above

Keval Bhatt
  • 6,224
  • 2
  • 24
  • 40
0

Try: 

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

In your css. I hope your helped with this. I have attached a link to jsfiddle: JSFiddle Demo

David Thomas
  • 249,100
  • 51
  • 377
  • 410
Sumit patel
  • 3,807
  • 9
  • 34
  • 61
  • We, as a group here on Stack Overflow, would rather your answers focused on answering the question, and omitted such unnecessary fluff as "hello." Similarly, to improve your answer, it would be beneficial to format your code clearly as code. You should also take the time to describe how your answer works and what it does to solve the problem; that way the OP and others in future might learn something useful from this. – David Thomas Oct 15 '15 at 11:25