省略号以截断长文本 [英] Ellipsis to truncate a long text

问题描述

我正在使用省略号概念截断HTML中的长文本.我已经成功地截断了该句子，但是"..."将不会出现在我的HTML中.我将以下内容用于css

I am using ellipsis concept to truncate a long text in my HTML. I have successfully managed to truncate the sentence but the "..." wont appear in my HTML. I use the following for the css

输出似乎正常.例如，对于测试测试，测试测试，测试测试，测试测试，测试测试，输出测试测试测试当我实际将其用作测试测试时...

The output appears to be fine.. i.e., for test test test test test test test test test the out put is test test test when i actually want it as test test test...

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

推荐答案

我不确定您要问的是什么或看到的是什么，但是只有容器中没有足够的空间时，文本才会被截断.例如:

I'm not sure what you're asking, or what you are seeing, but the text will only be truncated if there's not enough space in the container. For example:

<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，它仅显示以下内容:

Here I limited the div's width to 100px, and it displays just this:

Lorem ipsu...

在您的示例中，宽度为99％，因此，如果截断宽度小于实际内容宽度，则只会看到截断(尝试调整浏览器窗口的大小以进行检查).

On your example you have 99% width, so you'll only see the truncation if that's less than the actual content width (try resizing the browser window to check).

这篇关于省略号以截断长文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！