省略截断长文本的省略号

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%的宽度,因此如果小于实际内容宽度,您将只看到截断(尝试调整浏览器窗口的大小以进行检查).