Geek Answers Handbook

Why doesn't text-overflow work when children have a float?

I have HTML code as follows:

<div style="width:100px;border: 1px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto"> <span style="float: left">LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft</span> </div>

But ellipsis doesn't seem to work. If I remove the float span attribute, it can be displayed in the usual way using "LeftLeft ...". Are text-overflow and float related to each other?

+4
source share
3 answers

The specification for the text-overflow property says that

This property indicates the rendering when the inline content overflows its block-container element ("block") in its inline progression which has an "overflow other than" visible.

Floating children are not embedded content, they are considered as a special kind of block content (their calculated display value is block ). That's why they should have their own text-overflow (because this property is not inherited) along with a width limit. eg.

 <div style="width:100px;border: 1px solid red;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0 auto"> <span style="float: left; max-width: 100%; overflow:hidden;text-overflow:ellipsis;">LeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeftLeft</span> </div>

( see JSfiddle )

+5
source

Trying to use this style for a span element:

 <span style="float:left; overflow:hidden"><!--Content--></span>
0
source

If you consider the CSS overflow property in the parent element, and the property is set to auto or hidden, then the parent will expand to contain floats, effectively clearing it for subsequent elements.

Thus, the float property does not work at all.

Not sure if anyone has a hack.

Check out the document, http://www.w3.org/TR/css3-box/#float. Its for CSS3 also applies to CSS2.

0
source

More articles:


All Articles