css文字超过两行溢出隐藏

原创已于 2022-03-18 09:40:12 修改 · 4.9k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

于 2022-03-16 09:51:59 首次发布

本文介绍了如何使用CSS样式来控制文本显示，当内容超过设定宽度时进行隐藏，并显示省略号。主要涉及`width`、`overflow`、`text-overflow`和`-webkit-line-clamp`等属性的使用，适用于多行文本的截断展示。

.title {
                    width: 300px;//设置宽
                    overflow: hidden; //超出隐藏
                    text-overflow: ellipsis; //溢出用省略号显示
                    display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
                    // 控制行数
                    -webkit-line-clamp: 2; //超出两行隐藏
                    -webkit-box-orient: vertical; // 从上到下垂直排列子元素
                    //（设置伸缩盒子的子元素排列方式）
                }

标签