CSS Text-overflow Ellipsis Not Displaying

Question

I have a div with some inner content that I need to have an ellipsis when it overflows. I've done this many times on other elements but for some reason this is not behaving as expected.

Also, I left white-space:nowrap; out on purpose because the content then does not break to the next line within the span, as a result I only see 2-3 words before the ellipsis starts. I would like the text to span the entire height of the parent container then have the ellipsis start for content that exists beyond those bounds.

Here is a working Demo: http://jsfiddle.net/sadmicrowave/DhkSA/

CSS:

.flow-element{
     position:absolute;
     font-size:12px;
     text-align:center;
     width:75px;
     height:75px;
     line-height:70px;
     border:1px solid #ccc;
}

.flow-element .inner{
     position:absolute;
     width:80%;
     height:80%;
     border:1px solid blue;
     top:0px;
     bottom:0px;
     left:0px;
     right:0px;
     margin:auto;
     text-align:center;
}

.flow-element .long{
     float:left;
     height:50px;
     width:100%;
     line-height:12px;
     border:1px solid red;  
     text-overflow:ellipsis;
     overflow:hidden;
}

HTML:

<a class='flow-element' style='top:100px; left:50px;'>
  <div class='inner'>
     <span class='long'>Box 1 and some other content that should wrap and do some other stuff</span>
  </div>
</a>

Can someone please help. I need to display as much text as possible within the red outlined span while having an ellipsis when text content overflows the container...

Thanks in advance

Saket Patel · Accepted Answer · 2012-03-29T19:34:20.033

42

you can't apply text-overflow: ellipsis to inline elements (span), it can be used with block elements only (div)

and also use white-space:nowrap; when using text-overflow: ellipsis;

check this, i have converted your inner span to div, just for proof of concept

http://jsfiddle.net/3CgcH/5/

i don't know why you have used span, but as per your logic you can make changes as i suggested

Update:

someone will think that in the question if i put white-space: nowrap; to span element then the text-overflow: ellipsis: is working so may be i am wrong, but it is not the case because questioner has used float: left in the span tag that means the span tag will be converted to a box block and work like a normal block level element, which is also wrong thing to do because if you need the block element behavior then use a block level element

Reference:

http://www.w3.org/TR/CSS2/visuren.html#propdef-float

http://dev.w3.org/csswg/css3-ui/#text-overflow

edited Mar 29 '12 at 19:34

answered Mar 29 '12 at 18:54

Saket Patel

6,573
1
27
36

1

that is absolutely wrong. works very nice with inline elements. – Sven Bieder Mar 29 '12 at 18:57
1

then why this w3c draft says that it applies to block contains only ? http://dev.w3.org/csswg/css3-ui/#text-overflow – Saket Patel Mar 29 '12 at 19:20
`white-space:nowrap;` is what I was missing – szeryf May 20 '14 at 06:52
I'm a bit late to the party but `overflow:hidden` also made it work for me. – Overcode Jun 29 '15 at 16:36

score 1 · Answer 2 · answered Mar 22 '13 at 21:31

1

I think you will find the problem is caused by having text-align: center;

answered Mar 22 '13 at 21:31

Peter Presnell

380
2
15

score 1 · Answer 3 · answered Jul 10 '22 at 16:27

1

In my case it helped to set display: block;

answered Jul 10 '22 at 16:27

zyrup

691
2
10
18

score 1 · Answer 4 · answered Mar 29 '12 at 18:56

1

Add this:

white-space:nowrap;

to .flow-element .long

then the overflow-ellispsis works.

answered Mar 29 '12 at 18:56

Sven Bieder

5,515
2
21
27

please see my comment to Heather Walters' post of the same solution. – sadmicrowave Mar 29 '12 at 18:59

score 0 · Answer 5 · answered Mar 29 '12 at 18:54

0

Add white-space:nowrap; to your .inner div.

answered Mar 29 '12 at 18:54

huzzah

1,793
2
22
40

adding your suggestion does indeed add the ellipsis to the text however the text does not wrap to the width of the inner element. I need to show as much of the text as I can, not just 2-3 words of it... – sadmicrowave Mar 29 '12 at 18:57
Yeah, I noticed that and was working on a solution that would wrap further than one line.... – huzzah Mar 29 '12 at 18:58
@sadmicrowave: You don't understand how text-overflow works. You want to see more? Then you must enlarge the width. – Sven Bieder Mar 29 '12 at 19:00
@Sven, would I not be able to increase the height and also see more? – sadmicrowave Mar 29 '12 at 19:02
no, the problm is, that text-overflow don't really works without white-space:nowrap. And that means you have only one line of text. – Sven Bieder Mar 29 '12 at 19:03
disappointing. can you think of any other way to achieve my intended results? – sadmicrowave Mar 29 '12 at 19:08
A quick search brought this SO jquery solution for both single and multiline ellipses: http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide – huzzah Mar 29 '12 at 19:12
Did you ever get this working correctly? I'd love to know how you achieved it if you did! – huzzah Apr 25 '12 at 15:31

CSS Text-overflow Ellipsis Not Displaying

5 Answers5