省略號以截斷長文本

Question

我正在使用省略號概念截斷HTML中的長文本。 我已成功地截斷了該句子，但“ ...”將不會出現在我的HTML中。 我將以下內容用於css

輸出似乎很好..例如，對於測試測試測試測試測試測試測試測試輸出，當我實際上希望將其作為測試測試測試時，輸出就是測試測試...

<div style="text-align:left; line-height: 20px; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; width: 99%;
            display : block;"> 

Answer 1

我不確定您要問的是什么，或者您看到的是什么，但是只有容器中沒有足夠的空間時，文本才會被截斷。 例如：

<style type="text/css">
div {
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100px;
}
</style>
<div> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

http://jsfiddle.net/jS7ea/

在這里，我將div的寬度限制為100px，它僅顯示以下內容：

Lorem ipsu...

在您的示例中，您的寬度為99％，因此，如果截斷小於實際內容的寬度，則只會看到截斷（請嘗試調整瀏覽器窗口的大小以進行檢查）。

Answer 2

function shorten(text, maxLength) {
    var ret = text;
    if (ret.length > maxLength) {
        ret = ret.substr(0,maxLength-3) + "...";
    }
    return ret;
}

您還可以使用… … … … （水平省略號），而不是3點

來源： http ： //html5hub.com/ellipse-my-text