项目上没有额外的行高，太长而无法放在一行上？

Question

我有一个像

这样的标准清单

<ul>
<li>short item</li>
<li>looooooooooooooong iiiiiiiiiiitem</li>
<li>short item</li>
<ul>

列表具有最大宽度，因此长项目涵盖两行并获得与其他项目相同的行高，因此如果您只是浏览它就看起来像四个项目。

有没有办法让长项占据两个“行”，但它们之间的行高较少？

提前致谢。

Answer 1

您可以使用jQuery将行高与字符串的偏移高度进行比较。如果文本的高度大于行高，则表示它占用多行。

Answer 2

您可以使用css :first-line属性：

li:first-line{
    line-height:30px;
}
li{
    line-height:10px;
    font-size:14px;
    width:150px;
    padding:10px;   
}

http://jsfiddle.net/EN4SX/