有没有人有一个更复杂的解决方案/库，用JavaScript截断字符串，并在末尾放一个省略号，比明显的一个:
if (string.length > 25) {
string = string.substring(0, 24) + "...";
}
当前回答
我对Kooilnc的解决方案投了赞成票。非常好的紧凑解决方案。有一个小的边缘情况，我想解决。如果有人出于某种原因输入了一个很长的字符序列，它不会被截断:
function truncate(str, n, useWordBoundary) {
var singular, tooLong = str.length > n;
useWordBoundary = useWordBoundary || true;
// Edge case where someone enters a ridiculously long string.
str = tooLong ? str.substr(0, n-1) : str;
singular = (str.search(/\s/) === -1) ? true : false;
if(!singular) {
str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
}
return tooLong ? str + '…' : str;
}
其他回答
大多数现代Javascript框架(JQuery, Prototype等)都有一个附加在String上的实用函数来处理这个问题。
下面是Prototype中的一个例子:
'Some random text'.truncate(10);
// -> 'Some ra...'
这似乎是您希望其他人处理/维护的功能之一。我会让框架来处理它，而不是编写更多的代码。
Text-overflow:省略号是您需要的属性。有了这个和一个溢出:隐藏在一个特定的宽度，超过它的所有东西将在最后得到三个周期的效果……不要忘记添加空格:nowrap或文本将被放入多行。
.wrap{
text-overflow: ellipsis
white-space: nowrap;
overflow: hidden;
width:"your desired width";
}
<p class="wrap">The string to be cut</p>
注意，这只需要在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获得了该代码片段。
如果你想用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;
}
如果使用Ext.js，可以使用Ext.util.Format.ellipsis函数。
