大多数现代Javascript框架(JQuery, Prototype等)都有一个附加在String上的实用函数来处理这个问题。

下面是Prototype中的一个例子:

'Some random text'.truncate(10);
// -> 'Some ra...'

这似乎是您希望其他人处理/维护的功能之一。我会让框架来处理它，而不是编写更多的代码。

所有现代浏览器现在都支持一个简单的CSS解决方案，当一行文本超过可用宽度时自动添加省略号:

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

(请注意，这需要以某种方式限制元素的宽度，以便产生任何效果。)

基于https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/。

应该注意的是，这种方法并不基于字符的数量进行限制。如果需要允许多行文本，它也不能工作。

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获得了该代码片段。

('long text to be truncated').replace(/(.{250})..+/, "$1…");

不知何故，上面的代码是不工作的某种复制粘贴或书面文本在vuejs应用程序。所以我使用lodash截断，它现在工作正常。

_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});

我总是使用cutr .js库来截断字符串并添加自定义省略号:

new Cuttr（'.container'， { 此处的选项 截断：“单词”， 长度： 8， 结尾：“...►' }); <script src=“https://unpkg.com/cuttr@1.1.1/dist/cuttr.min.js”></script> <p class=“container”>Lorem ipsum dolor sit amet， consetetur sadipscing elitr， sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat， sed diam voluptua.在vero eos et accusam et justo duo dolores et ea rebum.Stet clita kasd gubergren， no sea takimata sanctus est lorem ipsum dolor sit amet.</p>

这是迄今为止我所知道的用JS切割字符串的最简单的方法(并且没有任何依赖关系)，它也可以作为jQuery插件使用。