CSS使标签标题包含固定字符长度？

Question

我正在使用jquerytabs，它会在点击某个按钮时动态添加标签。标题可以是任何字符长度。我想要的是如果 标题包含超过20个字符，CSS应该使它成为17个长度字符，前面有3个点。这里是标题html 我在firebug中看到的元素，标题是“测试标题长度太多字符”

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active">
<a href="#ui-tabs-4">Test Title length With Too many Characters/a>
<span class="ui-icon ui-icon-close"></span>
</li>

我正在寻找css属性，以便我将标题看作“测试标题长度......”，它长17个字符，前面有3个点？

Answer 1

你可能想要这样的东西：http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

即。将此类添加到列表项：

.truncate {
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

由于您在此问题中添加了javascript / jQuery标记，因此这里是用于截断文本的js / jQuery ..

var text = $('a').text();
if(text.length > 17)​{
    $('a').text(text.substr(0,17) + "...")
}​

CSS是实现这一目标的更简洁方法。