位置:- 正文

最多显示2行文字,多余的省略显示。(最多显示2行文字怎么弄)

编辑:rootadmin
最多显示2行文字,多余的省略显示。

推荐整理分享最多显示2行文字,多余的省略显示。(最多显示2行文字怎么弄),希望有所帮助,仅作参考,欢迎阅读内容。

最多显示2行文字,多余的省略显示。(最多显示2行文字怎么弄)

文章相关热门搜索词:显示几行,最多显示2行文字怎么弄,最多显示2行文字怎么弄,最多显示2行文字怎么弄,最多显示2行文字怎么弄,最多显示2行文字的软件,最多显示2行文字的软件,最多显示2行文字怎么弄,内容如对您有帮助,希望把文章链接给更多的朋友!

前端在 CSS 中最多显示 2 行文字,可以使用 overflow: hidden 和 text-overflow: ellipsis 属性,并设置一个高度限制。

例如:

.box {     overflow: hidden;    text-overflow: ellipsis;  // 只要超过宽度就换行,不论中文还是英文  word-break: break-all; //最多展示两行  display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;//根据样式设置    line-height: 1.2em;    max-height: 2.4em;}

这样,如果文本需要更多的行数才能完全显示,则会省略多余的文本并在末尾显示省略号(...)。

本文链接地址:https://www.jiuchutong.com/zhishi/297819.html 转载请保留说明!
下一篇链接:https://www.jiuchutong.com/zhishi/297820.html
免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

鄂ICP备2023003026号

友情链接: 武汉网站建设 电脑维修 湖南楚通运网络