且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

省略号以截断长文本

更新时间:2022-11-07 23:30:02

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

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).