首页 > 代码库 > 文本超出内容区域后用三个省略号代替
文本超出内容区域后用三个省略号代替
1.固定宽高的
当div的宽高被固定了, 我们只需要给它加三个属性: overflow:hidden (超出部分隐藏)
white-space:nowrap (强制不换行)
text-overflow:ellipsis (用三个省略号代替)
上面这种方法没有兼容性问题,但是有局限性,就是文本只能有一行,要是遇到下面这种情况怎么做呢?
就需要用到下面这种办法了
2.不固定宽高的
我们需要给div设置4个属性: display:-webkit-box (box-flex布局)
-webkit-box-origin:vertical (垂直排列子元素)
-webkit-line-clamp;n (n>0) (显示几行)
overflow:hidden (超出部分隐藏)
这种方法可以实现上面那种效果,不过有兼容性问题。
文本超出内容区域后用三个省略号代替
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。