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

Question

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

<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 个字符长，前面有三个点？

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 是实现这一目标的一种更简洁的方法。