如何截斷最後一個項目的文字水平UL列表

Question

我有一個HTML列表如下...

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

...和我使用display: inline-block;保持列表項上一條水平線。

ul的width是有限的，我想截斷最後一項使用省略號，當它不適合width。

所以需要看起來像：

Some text Some more text Even mo...

我在ul使用text-overflow: ellipsis;嘗試過，但沒有效果。

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>

這裏有一個fiddle

Answer 1

我能設置<li>到display: inline時它的工作。

specification對於text-overflow說它只適用於塊元素。我猜上的display: inline-block讓他們有自己的塊上下文，因此父母的text-overflow屬性不再被應用。

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

Answer 2

，因爲你是它appying到ul而應該適用於li，見下圖：

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>

Answer 3

似乎鉻無法正常運作，Firefox和IE這似乎是正確的行爲的第二li後添加省略號：

對於省略號和字符串值，實現必須隱藏字符和原子inline-根據需要在線的適用邊緣設置高級元素以適合省略號/字符串。將省略號/字符串緊靠其餘內聯內容的適用邊緣放置。一行上的第一個字符或原子內聯級元素必須被剪切而不是省略。

溢出省略號：

行內盒未內聯：（http://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0）

inline-block元件被歸類爲原子內嵌級元件的「文本溢出」屬性框（如替換的內嵌級元素，內聯塊元素和內聯表元素）被稱爲原子內聯級框，因爲它們作爲單個不透明框參與其內聯格式化上下文。

串聯級元素和內聯框（http://www.w3.org/TR/CSS21/visuren.html#inline-boxes）

根據第一引用，這表明整個li應與像Firefox和IE做省略號來代替。

爲了使這項工作在一系列瀏覽器中保持一致，請將li從display: inline-block;更改爲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>