品易云推流 关闭
文章详情页
文章 > css教程 > css设置溢出不换行的方法

css设置溢出不换行的方法

头像

小妮浅浅

2021-07-19 17:09:58804浏览 · 0收藏 · 0评论

css文本溢出不换行,省略号显示

单行文本溢出;

设置宽度,多于文本溢出,显示省略号。

div{
width:300px;   
overflow: hidden;   
text-overflow:ellipsis;   
whitewhite-space: nowrap;
}

多行文本溢出;

使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注意:

1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

2.display: -webkit-box; 必须结合的属性,将对象作为弹性伸缩盒子模型显示。

3.-webkit-box-orient 必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。

div{
display: -webkit-box;   
-webkit-box-orient: vertical;   
-webkit-line-clamp: 3;   
overflow: hidden;
}

不是Webkit浏览器的暂时未有。

以上就是css设置溢出不换行的方法,希望对大家有所帮助。更多css学习指路:css教程

本文转载于php中文网,如有侵犯联系作者修改。

关注

关注公众号,随时随地在线学习

本教程部分素材来源于网络,版权问题联系站长!

底部广告图