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
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.)
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.
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.
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!
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
Add this:
white-space:nowrap;
to .flow-element .long
then the overflow-ellispsis works.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With