1、固定宽度 文本自适应向两边分布
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines;
flex: 1;
letter-spacing: 1rpx;
2、单行/两行文字超出显示省略号
//超过两行省略号表示
.two-line{
overflow: hidden;
text-overflow: ellipsis; // text-overflow css3的属性,当文本溢出时,显示省略号
display: -webkit-box;
-webkit-line-clamp: 2; // 设置两行文字溢出
-webkit-box-orient: vertical;
}
//超过一行省略号表示
.one-line{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
3、隐藏滚动条
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
4、重置input样式
input{
background:none;
outline:none;
border:0px;
}
5、修改placeholder样式
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
6、不等边直角三角形
.triangle {
height: 0;
width: 0;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0 0 200px 100px;
}