😎 CSS实现单行、多行文本溢出显示省略号(ellipsis)

在网页设计中，当内容超出容器范围时，使用省略号代替被隐藏的部分是一种优雅的处理方式。无论是单行还是多行文本，都可以通过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都能让你的内容更加美观、整洁！💡

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！