在 Mac 系统中，经常可以看到文本被截断并以省略号 (...) 结尾的情况。这种截断方式不仅可以用于文件名或路径，也可以用于显示长段落的文本。在前端开发中，使用这种省略方式也是十分常见的，比如在卡片组件、列表项组件等场景下，限制文字的长度并以省略号结束，从而让页面更加美观和易读。
实现方式
在 CSS 中实现文本截断加省略号有多种方式，其中最常用的是通过设置 text-overflow 属性来实现。同时，我们还需要设置 white-space 和 overflow 属性，具体代码如下：
{
white-space: nowrap; // 防止换行
overflow: hidden; // 溢出部分隐藏
text-overflow: ellipsis; // 使用省略号表示截断
}上面的代码中，text-overflow: ellipsis 才是真正起到省略作用的关键所在。这个属性会将超过容器宽度的文本内容以省略号的形式展示出来。
细节处理
然而，在实际开发中，上述方法也存在一些细节问题。比如当文本本身就很短时，即使使用了省略号，也依然无法占满整个容器；而当文本中间出现换行符 \n 时，也会影响截断效果。这时候我们需要做一些额外的处理。
文本长度不足
针对文本长度不足的情况，我们可以通过将 display 属性设置为 table 或 inline-block，从而让元素占据整个容器。具体代码如下：
{
display: inline-block; // 或者 table
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}换行问题
如果想要解决中间有换行符的问题，我们可以使用 JavaScript 来动态地处理一下文本，将其转换成不含换行符的纯文本。具体代码如下：
const truncateText = (text, maxLength) => {
if (text.length <= maxLength) return text;
const sanitizedText = text.replace(/\n/g, '');
const truncatedText = sanitizedText.slice(0, maxLength);
return `${truncatedText}...`;
};最佳实践
实际开发中，我们还需要考虑一些最佳实践，以确保文本截断的效果更好：
- 设置合适的容器宽度和最大长度；
- 省略号应该紧挨着截断文本，避免产生多余的空白；
- 对于包含超链接的文本，应该避免截断超链接文本，而应该将其作为一个整体来处理；
- 对于多行文本的截断，需要根据实际情况设置
line-height属性，以保证省略号的对齐效果。
总结
本文简要介绍了在前端开发中实现 Mac 风格的文本截断加省略号的方法，并针对一些细节问题提出了解决方案和最佳实践。希望本文能够对大家在实际开发中遇到类似问题时提供一些参考和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27777