How to trigger text-overflow: ellipsis on multi-line element [duplicate]

问题

This question already has answers here:

Limit text length to n lines using CSS (13 answers)

Closed 6 years ago.

I have this element that contains a string which exceeds the space available. Text should be displayed on two lines only. I need text-overflow: ellipsis to be triggered but it's not happening here. What am I doing wrong?

<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

回答1:

You need white-space: nowrap; for text-overflow: ellipsis; to work properly: http://jsfiddle.net/DHge3/3/

回答2:

Remove padding from your CSS and it will work fine

CSS

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

FIDDLE

来源：https://stackoverflow.com/questions/14596777/how-to-trigger-text-overflow-ellipsis-on-multi-line-element