截断长字符串的聪明方法

Question

有没有人有一个更复杂的解决方案/库，用于使用 JavaScript 截断字符串并在末尾添加省略号，而不是显而易见的：

if (string.length > 25) {
  string = string.substring(0, 24) + "...";
}

原文由 naltatis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

本质上，您检查给定字符串的长度。如果它比给定长度 n 长，则将其剪辑为长度 n （ substr 或 slice ）并添加 html 实体 … (…) 到被剪断的字符串。

这样的方法看起来像

function truncate(str, n){
 return (str.length > n) ? str.slice(0, n-1) + '…' : str;
 };

如果“更复杂”是指在字符串的最后一个单词边界处截断，那么您需要进行额外检查。

首先将字符串剪辑到所需的长度，然后将结果剪辑到最后一个单词的边界

function truncate( str, n, useWordBoundary ){
 if (str.length <= n) { return str; }
 const subString = str.slice(0, n-1); // the original check
 return (useWordBoundary
 ? subString.slice(0, subString.lastIndexOf(" "))
 : subString) + "&hellip;";
 };

您可以使用您的函数扩展本机 String 原型。在这种情况下，应删除 str 参数，并将函数中的 str 替换为 this ：

 String.prototype.truncate = String.prototype.truncate ||
 function ( n, useWordBoundary ){
 if (this.length <= n) { return this; }
 const subString = this.slice(0, n-1); // the original check
 return (useWordBoundary
 ? subString.slice(0, subString.lastIndexOf(" "))
 : subString) + "&hellip;";
 };

更教条的开发人员可能会为此强烈谴责你（“ _不要修改你不拥有的对象_”。不过我不介意）。

一种不扩展 String 原型的方法是创建

您自己的辅助对象，包含您提供的（长）字符串

以及前面提到的截断它的方法。这就是片段

下面是。

 const LongstringHelper = str => {
 const sliceBoundary = str => str.substr(0, str.lastIndexOf(" "));
 const truncate = (n, useWordBoundary) =>
 str.length <= n ? str : `${ useWordBoundary
 ? sliceBoundary(str.slice(0, n - 1))
 : str.slice(0, n - 1)}&hellip;`;
 return { full: str, truncate };
 };
 const longStr = LongstringHelper(`Lorem ipsum dolor sit amet, consectetur
 adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
 irure dolor in reprehenderit in voluptate velit esse cillum dolore
 eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum`);

 const plain = document.querySelector("#resultTruncatedPlain");
 const lastWord = document.querySelector("#resultTruncatedBoundary");
 plain.innerHTML =
 longStr.truncate(+plain.dataset.truncateat, !!+plain.dataset.onword);
 lastWord.innerHTML =
 longStr.truncate(+lastWord.dataset.truncateat, !!+lastWord.dataset.onword);
 document.querySelector("#resultFull").innerHTML = longStr.full;

 body {
 font: normal 12px/15px verdana, arial;
 }

 p {
 width: 450px;
 }

 #resultTruncatedPlain:before {
 content: 'Truncated (plain) n='attr(data-truncateat)': ';
 color: green;
 }

 #resultTruncatedBoundary:before {
 content: 'Truncated (last whole word) n='attr(data-truncateat)': ';
 color: green;
 }

 #resultFull:before {
 content: 'Full: ';
 color: green;
 }

 <p id="resultTruncatedPlain" data-truncateat="120" data-onword="0"></p>
 <p id="resultTruncatedBoundary" data-truncateat="120" data-onword="1"></p>
 <p id="resultFull"></p>

最后，您只能使用 css 来截断 HTML 节点中的长字符串。它使您的控制更少，但很可能是可行的解决方案。

 body {
 font: normal 12px/15px verdana, arial;
 margin: 2rem;
 }

 .truncate {
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 width: 30vw;
 }

 .truncate:before{
 content: attr(data-longstring);
 }

 .truncate:hover::before {
 content: attr(data-longstring);
 width: auto;
 height: auto;
 overflow: initial;
 text-overflow: initial;
 white-space: initial;
 background-color: white;
 display: inline-block;
 }

 <div class="truncate" data-longstring="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."></div>

原文由 KooiInc 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

请注意，这只需要为 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 获得了该代码片段。

原文由 mwilcox 发布，翻译遵循 CC BY-SA 3.0 许可协议