How to truncate text of last item in horizontal ul list
I got it work when setting <li>
to display: inline
.
The specification for text-overflow
states that it only applies to block elements. I guess having display: inline-block
on <li>
lets them have their own block context and thus the parent's text-overflow
property isn't applied anymore.
ul {list-style-type:none; margin:0; padding:0;width:250px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
li {display:inline; margin-right:10px}
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>
JSFiddle
because you are appying it to ul
instead you should apply to li
, see below:
ul {
list-style-type: none;
margin: 0;
padding: 0
}
li {
display: inline-block;
vertical-align:top;
margin-right: 10px;
max-width: 110px
}
li:last-of-type {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Some even more text</li>
</ul>
It appears that Chrome is not behaving correctly, Firefox and IE add the ellipsis after the second li
which appears to be correct behaviour:
For the ellipsis and string values, implementations must hide characters and atomic inline-level elements at the applicable edge(s) of the line as necessary to fit the ellipsis/string. Place the ellipsis/string immediately adjacent to the applicable edge(s) of the remaining inline content. The first character or atomic inline-level element on a line must be clipped rather than ellipsed.
Overflow Ellipsis: the ‘text-overflow’ property (http://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0)
inline-block
elements are classed as atomic inline-level elements:
Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.
Inline-level elements and inline boxes (http://www.w3.org/TR/CSS21/visuren.html#inline-boxes)
Which according to the first quote suggests that the whole li
should be replaced with the ellipses like Firefox and IE do.
To make this work consistently across a range of browsers change the li
from display: inline-block;
to display: inline;
.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 250px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden
}
li {
display: inline;
margin-right: 10px
}
<ul>
<li>Some text</li>
<li>Some more text</li>
<li>Even more text</li>
</ul>