前端开发中经常会有特殊样式处理，比如文本多余显示省略号，还有一些浏览器兼容特殊处理，比较杂，本文旨在收集一些经常用到的css片段，后面用到的话可以更方便的获取。暂时很少，后续会一直添加。
文本超长处理
1
2
3
| white-space: nowrap; //保证文本内容不会自动换行，如果多余的内容会在水平方向撑破单元格。
overflow: hidden; //隐藏超出单元格的部分。
text-overflow: ellipsis; //将被隐藏的那部分用省略号代替。
|
数字或字母自动换行
IE10 img height=auto没有高度
1
2
3
| // <img width="100%" height="auto"/>
// 这种标签在ie10没有高度，默认展示1px，我们可以在css样式中重写height解决
height: auto !important;
|
清除浮动
1
2
3
4
5
| <div class="box clearfix">
<div class="floated"></div>
<div class="floated"></div>
<div class="floated"></div>
</div>
|
1
2
3
4
5
6
7
8
| .clearfix::after {
content: '';
display: block;
clear: both;
}
.floated {
float: left;
}
|