我们常用的就是实现单行文本溢出显示省略号,此时需要定宽度,代码如下:
.box{width:200px;
overflow: hidden;
text-overflow:ellipsis;//文本溢出显示省略号
white-space: nowrap;//文本不换行}
那如何实现多行文本溢出呢?
第一种:可以使用css3方法
<pre name="code" class="css">.proname {
display: -webkit-box;
-webkit-line-clamp: 2;//限制文本的行数,只显示两行
-webkit-box-orient: vertical;
overflow: hidden;
}
效果如下,真是方便又使用
常用css3小技巧
移除input类型为number在谷歌浏览器下自带的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none !important;
margin: 0;
}