CODEWITHSUNDEEP
htmlcsshtml-lists
Fijjit
Fijjit

Reputation: 1477

How to truncate text of last item in horizontal ul list

I have an HTML list as follows...

<ul>
    <li>Some text</li>
    <li>Some more text</li>
    <li>Even more text</li>
</ul>

...and I'm using display: inline-block; to keep the list items on a single horizontal line.

The ul's width is limited and I want to truncate the last item using an ellipsis when it doesn't fit into that width.

So needs to look something like:

Some text Some more text Even mo...

I've tried using text-overflow: ellipsis; on the ul, but to no effect.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 250px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden
}
li {
  display: inline-block;
  margin-right: 10px
}
<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

Here's a fiddle

Upvotes: 7

Views: 8214

Answers (3)

maryisdead
maryisdead

Reputation: 1810

I got it to 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;
  overflow: hidden;
  padding: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 250px;
}

li {
  display: inline;
  margin-right: 10px
}
<ul>
  <li>Some text</li>
  <li>Some more text</li>
  <li>Even more text</li>
</ul>

JSFiddle

Upvotes: 13

dippas
dippas

Reputation: 60563

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>

Upvotes: 8

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

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>

Upvotes: 4

Related Questions