巫道起家,三对夫妻,1.76精品传奇私服发布网
单行文本超出,代码如下:
css代码:
<style>
.one{
width:200px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
</style>
效果如下:
多行文本超出部分显示省略号
代码如下:
<style>
.more{
line-height:18px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
</style>
效果图如下;
注意事项:
- 将height设置为line-height的整数倍,防止超出的文字露出。
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的webkit属性。常见结合属性:
- display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!!
点击进行留言回复
相关文章:
-
-
-
详解CSS3新增的背景属性
CSS3新增属性:background-clip ,background-origin , background-size,本文给大家分享CSS3新增的背景属性...
[阅读全文]
-
-
-
CSS3 旋转立方体问题详解
这篇文章主要介绍了CSS3 旋转立方体问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
Grid 宫格常用布局的实现
这篇文章主要介绍了Grid 宫格常用布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学...
[阅读全文]
-
-
-
CSS3实现网站商品展示效果图
这篇文章主要介绍了CSS3实现网站商品展示效果图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习...
[阅读全文]
-
网友评论