功夫码

css保留1行或指定行数写法

晓峰 时间:2021-08-20 22:19:22 阅读:378
--------------------------------------------------------- Ta 只分享的内容开始 ---------------------------------------------------------------------

css保留1行或指定行数写法


1. 只显示一行多余显示省略号;

text-overflow:ellipsis;//显示为省略号;可以用clip,不显示省略号,将溢出部分裁掉
white-space:nowrap;//文字不换行
overflow:hidden;

2. 只显示指定行多余显示省略号;

word-break:break-all;//强制换行
text-overflow:ellipsis;//显示为省略号
display:-webkit-box;//对象作为伸缩盒子模型显示
-webkit-box-orient:vertical;//设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp:2;//显示行数## 标题文字 ##
overflow:hidden;


备注:word-break:break-all 和word-wrap:break-word 区别

word-break:break-all   
如果行末尾空间装不下一个长单词,会把长单词裁断,后半部分换行显示
word-wrap:break-word   
如果行末尾空间装不下一个长单词,不会裁断单词,直接把整个单词换行显示


--------------------------------------------------------- Ta 只分享了这些内容 ---------------------------------------------------------------------

本文来源:功夫码(gongfuma.com)
声明:本文系功夫码原创稿件,版权属[功夫码 gongfuma.com]所有。
未经授权不得转载,已经协议授权的媒体下载使用时须注明"稿件来源:功夫码",违者将依法追究责任。

相关文章

  • 回到顶部