“超出你的想象！让单行文本显示…不再只是CSS和JavaScript的事情”

1. 前言

前端需求中经常有这样的需求：当文本超出一定长度后，只显示前几个字符和最后几个字符，中间部分用省略号代替，常见于文章标题、搜索结果等。

那么，在实际开发中，我们应该如何处理这种需求呢？下面就分几个层次来探讨一下，希望能对大家有所帮助。

2. CSS实现

在CSS中，我们可以使用text-overflow和white-space两个属性来实现单行文本过长时中间部分省略的效果。

首先，需要给元素设置一个固定的宽度，并且将white-space属性设置为nowrap，防止文字换行。然后，我们设置text-overflow属性为ellipsis，表示用省略号代替溢出部分。

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

值得注意的是，text-overflow属性只在以下条件下生效：

• 元素必须设置了固定的宽度
• 元素必须有设置overflow: hidden或overflow: scroll属性
• 元素必须是单行的文本

3. JavaScript实现

在JavaScript中，我们可以根据字符串长度来判断是否需要截取文本并添加省略号。下面是一个简单的实现：

function ellipsis(str, maxLength) {
  if (str.length <= maxLength) {
    return str;
  } else {
    return str.substr(0, maxLength / 2) + '...' + str.substr(str.length - maxLength / 2);
  }
}

这个函数接收两个参数：要处理的字符串和最大长度。它首先判断字符串是否超出最大长度，如果没有则直接返回原字符串，否则就从字符串的前半部分和后半部分各取maxLength / 2长度，并在中间加上省略号。

不过，这种做法有一个缺点：不能处理包含英文单词或中文字符的情况，可能会将单词或字符截断，破坏语义，如何解决呢？下面介绍一下另外一种方法。

4. 正则表达式实现

在正则表达式中，我们可以使用\b匹配单词边界，如下所示：

function ellipsis2(str, maxLength) {
  if (str.length <= maxLength) {
    return str;
  } else {
    var reg = new RegExp("\b.{0," + (maxLength - 3) / 2 + "}\b", "g");
    var arr = str.match(reg);
    return arr[0] + '...' + arr[arr.length - 1];
  }
}

这个函数也是接收两个参数：要处理的字符串和最大长度。它首先判断字符串是否超出最大长度，如果没有则直接返回原字符串，否则就将正则表达式\b.{0,(maxLength - 3) / 2}\b编译成一个正则对象，表示匹配以单词边界为开头和结尾的长度不大于(maxLength - 3) / 2的任意字符。然后我们用match()方法将字符串按正则表达式进行匹配，得到一个数组，数组的第一个元素为匹配到的第一个单词，最后一个元素为匹配到的最后一个单词，这样就可以避免截断一个单词或一个字符了。

5. 应用场景

以上几种方法都有各自的优缺点，需要根据实际需求选择合适的方法。## 6. 相关技巧

除了以上介绍的方法外，还有一些相关技巧可以提高效果。

6.1 使用CSS变量

在实际开发中，可能会遇到要对不同元素进行省略号处理的情况。如果每个元素都写一遍完整的CSS代码，那就太麻烦了。这时我们可以使用CSS变量来简化代码。

首先定义一个CSS变量--max-width表示最大宽度，然后在具体的元素样式中将需要设置省略号的元素的宽度设置为该变量即可，如下：

:root {
  --max-width: 200px;
}

.text-ellipsis {
  max-width: var(--max-width);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

这样，如果需要修改所有元素的最大宽度，只需要修改--max-width变量的值即可。

6.2 兼容多语言文字

在多语言环境下，由于不同语言的字符宽度不同，可能会导致超出范围或过长的问题。为了解决这个问题，我们可以使用JavaScript中的Intl对象，其中的Segmenter API可以帮助我们根据传入的文本、语言和选项等生成字符串分段的迭代器，从而避免截断字符或单词。

下面是一个使用Intl.Segmenter实现的例子：

async function ellipsis3(str, maxLength) {
  if (str.length <= maxLength) {
    return str;
  } else {
    const segmenter = new Intl.Segmenter('zh-CN', { granularity: 'word' });
    const segments = segmenter.segment(str);
    let len = 0;
    const result = [];
    for await (const { segment } of segments) {
      const segLen = segment.length;
      if (len + segLen > maxLength - 3) break;
      result.push(segment);
      len += segLen;
    }
    return result.join('') + '...';
  }
}

这里的Intl.Segmenter中第一个参数为语言标识符，可以根据需要进行更改。granularity选项为分段的粒度，这里设置为word表示按照单词分段。然后使用迭代器遍历每个分段，累加每个分段的长度，若长度超过最大长度，则跳出循环，并将前面的分段拼接起来，末尾添加省略号，返回结果即可。

7. 总结

以上就是单行文本超出时中间部分显示省略号的几种方法，各种方法都有各自的优劣和适用范围，需要根据实际情况进行选择。同时，还介绍了一些相关技巧和注意事项，希望对大家有所帮助。