😎 CSS实现单行、多行文本溢出显示省略号(ellipsis)
发布时间：2025-03-14 12:40:02来源：网易
在网页设计中，当内容超出容器范围时，使用省略号代替被隐藏的部分是一种优雅的处理方式。无论是单行还是多行文本，都可以通过CSS轻松实现！✨
对于单行文本溢出，只需设置`white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`即可。这种方法能让超出部分自动显示为省略号，非常适合标题或简短描述的场景。🌟
而多行文本溢出则稍显复杂，需要借助伪元素和行高计算。例如：
```css
p {
display: -webkit-box;
-webkit-line-clamp: 3; / 设置显示的行数 /
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
```
这样就能让超过三行的文字以省略号结尾，避免页面显得杂乱无章。💫
无论是哪种情况，合理运用CSS都能让你的内容更加美观、整洁！💡
免责声明：本答案或内容为用户上传，不代表本网观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 如遇侵权请及时联系本站删除。
