本来我是用{{(item.title.length<38)?item.title:(item.title.substr(0,38)+'...')}}来判断标题的长度，超过长度，截取前38个字符，但是中英文字符的宽度不一样，导致不整齐。
于是使用如下的css方法。text-overflow:ellipsis;
<!DOCTYPE html>
<html>
<head>
<style>
a.test {
display:block;//必要
white-space:nowrap;
width:12em; //必要
overflow:hidden; //必要
text-overflow:ellipsis;//核心
}
div.test
{
white-space:nowrap;
width:12em;
overflow:hidden;
border:1px solid #000000;
text-overflow:clip;
}
</style>
</head>
<body>
<p>下面两个 div 包含无法在框中容纳的长文本。正如您所见，文本被修剪了。</p>
<p>这个 a 使用 "text-overflow:ellipsis" ：</p>
<a class="test">This is some long text that will not fit in the box</a>
<p>这个 div 使用 "text-overflow:clip"：</p>
<div class="test">This is some long text that will not fit in the box</div>
</body>
</html>
网友评论