有没有人有一个更复杂的解决方案/库，用JavaScript截断字符串，并在末尾放一个省略号，比明显的一个:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
当前回答
如果你想用css而不是JavaScript;
.textShortDesc { /*Here we have determined the max number of lines.*/
display: block; /* or inline-block */
-o-text-overflow: ellipsis; /* Opera < 11*/
text-overflow: ellipsis; /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
word-wrap: break-word;
overflow: hidden;
max-height: 2em; /*max-height/line-height=rowCount */
line-height: 1em;
}
其他回答
所有现代浏览器现在都支持一个简单的CSS解决方案，当一行文本超过可用宽度时自动添加省略号:
p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
(请注意，这需要以某种方式限制元素的宽度，以便产生任何效果。)
基于https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/。
应该注意的是，这种方法并不基于字符的数量进行限制。如果需要允许多行文本，它也不能工作。
我不确定这是否算聪明，但它简洁明了:
truncateStringToLength (string, length) {
return (string.length > length)
? `${string.substring(0, length)} …`
: string
}
……然后:
truncateStringToLength('Lorem ipsum dolor sit amet, consetetur sadipscing', 20)
修正Kooilnc的解决方案:
String.prototype.trunc = String.prototype.trunc ||
function(n){
return this.length>n ? this.substr(0,n-1)+'…' : this.toString();
};
如果不需要截断string对象，则返回string值而不是string对象。
人们希望用JavaScript而不是CSS来实现这一点是有充分理由的。
在JavaScript中截断为8个字符(包括省略号):
short = long.replace(/(.{7})..+/, "$1…");
or
short = long.replace(/(.{7})..+/, "$1…");
注意，这只需要在Firefox中执行。
所有其他浏览器都支持CSS解决方案(参见支持表):
p {
white-space: nowrap;
width: 100%; /* IE6 needs any width */
overflow: hidden; /* "overflow" value must be different from visible"*/
-o-text-overflow: ellipsis; /* Opera < 11*/
text-overflow: ellipsis; /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}
具有讽刺意味的是，我从Mozilla MDC获得了该代码片段。
