css text-overflow str-slice

`text-overflow` 是 CSS 属性，用于控制当文本溢出容器时如何处理。`text-overflow` 可以设为 `ellipsis`，表示用省略号来代替溢出的文本。

`str-slice` 是一个 JavaScript 函数，用于截取字符串的一部分。它的语法如下：

str.slice(startIndex[, endIndex])

其中 `startIndex` 表示开始截取的位置，`endIndex` 表示截取结束的位置（不包括该位置的字符）。如果省略 `endIndex`，则将截取到字符串末尾。

将它们结合起来可以实现当文本溢出时，用省略号来代替溢出的部分。具体实现方法如下：

1. 首先给容器设置一个固定宽度和 `overflow: hidden` 属性，表示当文本溢出时隐藏溢出部分。

2. 在容器内部嵌套一个块级元素，用来显示文本。给这个元素设置 `white-space: nowrap` 属性，表示文本不换行。

3. 使用 JavaScript 获取文本块元素的实际宽度和文本内容的实际宽度，如果文本内容宽度大于文本块元素宽度，则进行截取并在结尾加上省略号。

示例代码如下：

HTML 代码：

<div class="container">
  <div class="text">这是一段很长很长的文本，可能会溢出容器。</div>
</div>

CSS 代码：

.container {
  width: 200px;
  overflow: hidden;
}

.text {
  white-space: nowrap;
}

JavaScript 代码：

const container = document.querySelector('.container');
const text = document.querySelector('.text');
const textWidth = text.offsetWidth;
const containerWidth = container.offsetWidth;

if (textWidth > containerWidth) {
  const slicedText = text.textContent.slice(0, Math.floor(containerWidth / textWidth * text.textContent.length)) + '...';
  text.textContent = slicedText;
}

这样就可以在文本溢出时使用省略号来代替溢出的部分了。