文本控制显示方式

有时候在元素显示区域并不充分的时候，我们会限制其宽度。但是，却会带来文本太长导致与我们预期的效果不符合。因此，我们常常采用 CSS 来控制文本的显示或者 JS 截取的方式来解决该问题。

JS 截取字符串的方法

再介绍 JS 截取文本前，就必须先介绍 JS 截取字符串的方法有哪些。

substring() 方法

string.substring(start, end) 方法从 start 位置截取到 end 位置，end 可选，没有设置时默认到末尾。

const str="这是JS截取字符串的方法substring!";
console.log(str.substring(2)); // 从第 3 个字符开始截取到末尾
console.log(str.substring(2, 12)); // 从第 3 个字符开始截取到第12个字符

// 控制台分别输出：
JS截取字符串的方法substring!
JS截取字符串的方法

substr() 方法

substr(start, count) 方法可在字符串中截取从开始下标开始的指定数目的字符，count 可选，没有设置时默认为剩余总数。

const str="这是JS截取字符串的方法substr!";
console.log(str.substr(2)); // 从第 3 个字符开始截取到末尾
console.log(str.substr(2, 10)); // 从第 3 个字符开始截取10个字符

// 控制台分别输出：
JS截取字符串的方法substr!
JS截取字符串的方法

slice() 方法

slice(start, end) 方法用于提取字符串的某个部分（从参数 start 到 end 位置），其实跟substring()很类似。但是 slice() 方法是以新的字符串返回被提取的部分。

const str="这是JS截取字符串的方法slice!";
console.log(str.slice(2)); // 从第 3 个字符开始截取到末尾
console.log(str.slice(2, 12)); // 从第 3 个字符开始截取到第12个字符

// 控制台分别输出：
JS截取字符串的方法slice!
JS截取字符串的方法

tip

同样的，该 slice() 也可以作用于数组的截取

JS 截取文本

其实 JS 控制文本显示的问题还是有限，只能在事先控制好显示文字的长度，但是有时候文本不单单是中文或者英文时，其所达到的效果并不理想。

例子：

<template>
  <div style="width: 20px">{{ text }}</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    let text = ref("这是JS截取文本控制文本时候溢出容器的伪代码");

    // ...一系列的业务逻辑后 JS 截取文本
    text.value = text.value.substring(2, 8); // JS截取文本
    return {
      text,
    };
  },
});
</script>

CSS 控制文本

CSS 样式控制文本主要应用三个文本样式，这种效果没有 JS 文本截取的副作用。它需要固定容器的宽度，在文本太长超出容器时，应用文本不换行的样式控制文本一行，并且应用超出隐藏样式，将文本超出部分给隐藏了。最后，应用文本超出后的效果样式呈现省略号。

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

以上就是文本超出容器后 CSS 所控制的显示效果。但是我们如何知道一个文本是否超过其容器的宽度呢？

文本是否溢出

如果想要判断文本是否溢出，有两种方式：

方法一

通过判断 document 元素中 el.clientWidth 和 el.scrollWidth，如果 scrollWidth 较大，说明文本溢出了，否则没溢出。

在有些浏览器中，即便文本溢出了，元素中 clientWidth 和 el.scrollWidth 是相等。详情请查看

方法二

当前元素给它宽度限制，之后创建一个字体大小、粗细、类型的元素，将其插入到 body 中，将新建的元素的 offsetWidth 与当前元素的 offsetWidth 相比较。新创建的文本元素并没有显示宽度，因此，如果新创建的元素 offsetWidth 大于当前元素的 offsetWidth，则说明文本溢出。

tip

注意：需要将新创建的元素插入到 body 中，不然其 offsetWidth 为 0

const curEl = el; // 当前元素
const newEl = document.createElement("span"); // 新建元素
const curStyle = window.getComputedStyle(el, ""); // 当前元素的样式
// 新建容器设置样式
newEl.style.fontSize = curStyle.fontSize;
newEl.style.fontWeight = curStyle.fontWeight;
newEl.style.fontFamily = curStyle.fontFamily;
document.body.appendChild(newEl); // 插入body中
newEl.innerHtml = el.innerText; // 新建容器赋值文本

if (newEl.offsetWidth > el.offsetWidth) {
  console.log("文本溢出了");
}

JS 截取字符串的方法​

substring() 方法​

substr() 方法​

slice() 方法​

JS 截取文本​

CSS 控制文本​

文本是否溢出​

方法一​

方法二​