ellipsis - 如何触发文本溢出：多行元素上的省略号

Question

我有这个元素包含一个超出可用空间的字符串。文本应仅显示在两行上。我需要text-overflow: ellipsis被触发，但这里没有发生。我究竟做错了什么？

<div><span>IpsumLorem Traborditum orb Porfalohyrm</span></div>

div{
    text-overflow: ellipsis;
    overflow: hidden;
    float: left;
    line-height: 20px;
    padding: 8px 6px 6px;
    height: 44px;
    width: 133px;
}

JSFiddle

Answer 1

您需要white-space: nowrap;正常text-overflow: ellipsis;工作：http: //jsfiddle.net/DHge3/3/

Answer 2

padding从你的删除CSS，它会正常工作

CSS

div {
    line-height: 20px;
    height: 44px;
    width: 133px;
    overflow: hidden;
    text-overflow: ellipsis;
}

小提琴