css实现超出三行则只显示一行的方法：1、打开相应的HTML文件；2、通过给文本标签设置css属性为“.text_singlerow {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}”实现单行显示即可。
本教程操作环境：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; /*这里设置inline-block或者block；根据使用情况来定（行内元素需要加这个，块级元素和行内块级可以不用）*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
登录后复制
需要注意的时，假设设置了只显示两行，则第二行结尾会以省略号显示，而第三…N行仍会显示，如果标签的高度够高的话，所以控制行数的显示，除了设置css样式外，还需要结合标签的高度设置。
推荐学习：《css视频教程》
以上就是css怎么实现超出三行则只显示一行的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2920663.html
