文本溢出：省略號不起作用

我不能讓text-overflow: ellipsis正常工作，我希望有人可以發現我找不到的錯誤。這裏是我的代碼：文本溢出：省略號不起作用

HTML：

<div class="out"> 
    <div class="in1"></div> 
    <div class="in2">some long random text which should not fit in here</div> 
</div>

CSS：

* { 
    box-sizing: border-box; 
} 

.out { 
    display: block; 
    height: 60px; 
    width: 250px; 
    border-bottom: 1px solid #eee; 
    cursor: pointer; 
    color: #000; 
    background: lightgreen; 
} 

.in1 { 
    height: 60px; 
    width: 60px; 
    padding: 10px; 
    float: left; 
    border: 1px solid red; 
} 

.in2 { 
    float: left; 
    height: 60px; 
    line-height: 60px; 
    width: 190px; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    font-size: 1.1em; 
    border: 1px solid blue; 
}

的jsfiddle：http://jsfiddle.net/59m5e6ex/

我發現this，但據我所知，我的div都會召開需求。

來源

2017-05-04 vsakos

只需添加空格：NOWRAP：您.in2類 – StefanBob

加上'白色空間：NOWRAP;'應該幫助 – Rennie

您需要將white-space: nowrap添加到具有省略號類型文本溢出的元素。否則，文本每次都換行到新行，並且沒有檢測到文本溢出。

這是你的工作提琴：http://jsfiddle.net/59m5e6ex/2/

所以，你需要至少3個屬性運行text-overflow: ellipsis;：

element { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}

另外，如果你不能在這裏使用所需特性的任何是JavaScript就可以用於在文本的末尾添加「3個點」。

/** 
* @param text   string  - text to shorten 
* @param maxTextLength int   - desired max length of shorten string 
* @return ret   string  - new shortened string 
*/ 
function shorten(text, maxTextLength) { 
    var ret = text; 
    if (ret.length > maxTextLength) { 
     ret = ret.substr(0,maxTextLength-3) + "..."; 
    } 
    return ret; 
}

它會返回指定最大長度的新字符串。但它當然會改變它的價值。更多本主題中可以發現here

來源

2017-05-04 20:41:48