Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Text-overflow Ellipsis Not Displaying

Tags:

css

ellipsis

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

like image 347
sadmicrowave Avatar asked Mar 29 '12 18:03

sadmicrowave


People also ask

Why is text-overflow ellipsis not working?

text-overflow: ellipsis only works when the following is true: Parent element is not set to display: inline (span's default,) You must use display: block or display: inline-block. The element's width must be constrained in px (pixels) – it doesn't work with values specified using % (percent.)

How do you show text-overflow on ellipsis?

To clip at the transition between characters you can specify text-overflow as an empty string, if that is supported in your target browsers: text-overflow: ''; . This keyword value will display an ellipsis ( '…' , U+2026 HORIZONTAL ELLIPSIS ) to represent clipped text.

How do you add text to ellipsis in CSS?

A text-overflow property in CSS is used to specify that some text has overflown and hidden from view. The white-space property must be set to nowrap and the overflow property must be set to hidden. The overflowing content can be clipped, display an ellipsis ('…'), or display a custom string.

How do you make an ellipsis CSS?

Draw a simple rectangle. Your choice of height and width , of the rectangle, will dictate the size and shape of the ellipse. The border-radius refers to the curvature at the corners of the ​shape; it should be set to a very high value (50% to 100%). An ellipse has been created!


2 Answers

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

like image 52
Saket Patel Avatar answered Sep 19 '22 14:09

Saket Patel


Add this:

white-space:nowrap;

to .flow-element .long

then the overflow-ellispsis works.

like image 41
Sven Bieder Avatar answered Sep 20 '22 14:09

Sven Bieder