HTML CSS 小技巧

1分隔符

使用css实现如图效果：

scss代码：

.hr {
　　position: relative;
　　width: 100%;
　　height: 1px;
　　background-color: #858585;

　　&:before {
　　　　content: "";
　　　　position: absolute;
　　　　width: 30px;
　　　　height: 30px;
　　　　left: 50%;
　　　　top: -13px;
　　　　margin-left: -15px;
　　　　background-color: #FFFFFF;
　　}

　　&:after {
　　　　content: "";
　　　　position: absolute;
　　　　width: 10px;
　　　　height: 10px;
　　　　border-radius: 5px;
　　　　left: 50%;
　　　　top: -4px;
　　　　margin-left: -5px;
　　　　background-color: #858585;
　　}
}

html:

<hr className="hr"/>

 

2 多余文字省略

IOS开发中，使用UILabel 容器装不下的文字会用...代替。

在HTML中也可以使用完成相同的效果。

css代码：

divStyle{
　　white-space:nowrap;
　　overflow:hidden;
　　text-overflow:ellipsis;
}