本教程操作环境：windows10系统、css3版、DELL G3电脑css怎么实现超出三行则只显示一行？CSS中多行文本时的行数控制显示有时候要进行多行文本内容只显示一行，或两行，或三行，这时候需要在CSS中进行相关属性的设置，代码如下：
本教程操作环境：windows10系统、css3版、DELL G3电脑
css怎么实现超出三行则只显示一行？
CSS中多行文本时的行数控制显示
有时候要进行多行文本内容只显示一行，或两行，或三行，这时候需要在CSS中进行相关属性的设置，代码如下：
// 多行显示
.text_morerow {
overflow: hidden;
display: -WEBkit-box;
-webkit-line-clamp: 2; // 显示2行
-webkit-box-orient: vertical;
Word-break: break-all;
}
// 单行显示
.text_singlerow {
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}需要注意的时，假设设置了只显示两行，则第二行结尾会以省略号显示，而第三...N行仍会显示，如果标签的高度够高的话，所以控制行数的显示，除了设置css样式外，还需要结合标签的高度设置。
以上就是css怎么实现超出三行则只显示一行的详细内容，更多请关注编程网其它相关文章！
--结束END--
本文标题: css怎么实现超出三行则只显示一行
本文链接: https://www.lsjlt.com/news/206937.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0