.text{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
-webkit-line-clamp属性值为须要截断的行数
.text{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical ; overflow: hidden;
}
选中不在此范围内的元素,例如:div:not(:last-child),选中除最后一个div的全部div元素css
有时候在作列表时须要为每项添加下边框线,但最后一个项不须要边框线vue
.item:not(:last-child){ border-bottom: 1px solid #ddd; }
pointer-events 指定鼠标如何与元素进行交互,设置为none,阻止任何鼠标事件对其的做用
ios
.item{ pointer-events: none; }
vertical-align 用来指定行内元素(inline)或 表格单元格(table-cell)元素的垂直对齐方式。web
子元素设置line-height:1,为了避免继承父元素的行高网络
<p> <span>顶部对齐</span> </p>
p{ line-height:3; } span{ line-height:1; vertical-align:top; }
有时候须要在组件中局部修改第三方组件的样式,而又不想去除scoped属性形成组件之间的样式污染。spa
此时只能经过>>>,穿透scoped。code
有些Sass 之类的预处理器没法正确解析 >>>。能够使用 /deep/ 操做符 或 ::v-deep( >>> 的别名)blog
<style scoped> 外层 >>> 第三方组件类名 { 样式 } /deep/ 第三方组件类名 { 样式 } </style>
当宽度设置为一些自适应的值时(%、vw等),高度的值没法肯定,这时能够使用 padding-top:100% 来解决高度的问题,由于 padding 的值参照于 width继承
<div class="parent"> <div class="child"> 这里是内容 </div> </div>
.parent{ position: relative; width: 50vw; height: 0; padding-top: 100%; } .child{ position: absolute; width: 100%; height: 100%; }
input{ caret-color: #dd3131; }
通常投影效果都会使用box-shadow来完成,但在一些不规则的形状下达不到预想的效果,这时能够使用drop-shadow来完成。事件
div{ filter: drop-shadow(0 0 6px #ddd); }
-webkit-overflow-scrolling: touch;
部分来源于网络收集,不定时更新~