css 文本超出就隐藏并且显示省略号

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

单行溢出隐藏

overflow:hidden; //文字长度超出限定宽度,则隐藏超出的内容
text-overflow:ellipsis; //规定当文本溢出时,显示省略符号来代表被修剪的文本
white-space:nowrap; //设置文字在一行显示,不能换行

//上面是一行内容的时候,当有两行的内容时候

多行溢出隐藏

overflow: hidden; //文本溢出限定的宽度就隐藏内容
text-overflow: ellipsis; //多行文本的情况下,用省略号“…”隐藏溢出范围的文本
display:-webkit-box; //和1结合使用,将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical; //和1结合使用 ,设置或检索伸缩盒对象的子元素的排列方式。设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果,它需要组合其他的WebKit属性
© 版权声明
THE END
如果喜欢,可以【点赞】【分享】【收藏】
点赞15赞赏 分享
评论 抢沙发
头像
非注册用户需审核通过后才能查看。友好交流,勿发纯表情,勿恶意灌水!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容