CSS JS实现文本溢出显示省略号...

掺乎君

于 2020-11-10 11:20:13 发布

阅读量244

点赞数

分类专栏： CSS JavaScript 文章标签： css javascript html5

本文链接：https://blog.youkuaiyun.com/m0_46172871/article/details/109595268

版权

18 篇文章

订阅专栏

1 篇文章

订阅专栏

本文介绍如何使用CSS属性处理单行或多行文本溢出的情况，并提供了一个JavaScript函数来实现字符串的截断并添加省略号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行文本溢出显示省略号

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本溢出显示省略号

display:-webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
overflow: hidden;

截断一个字符串用 ‘…’ 附加到结尾

const truncateString = (str, num) =>
  str.length > num ? str.slice(0, num > 3 ? num - 3 : num) + '...' : str;