CSS常用代码片段

CSS常用代码片段（持续更新）

• 万能清浮动

.clearfix{
    *zoom: 1;
    *height: 1px;
}
.clearfix:after{
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}

• 图片水平垂直居中

img{
    display: inline-block;
    vertical-align: middle;
}
i{
    vertical-align: middle;
    height: 100%;
    display: inline-block;
}

• 普通div容器中，文字溢出，省略号显示

p{  
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

• 表格中文字溢出，省略号显示

td{ 
    white-space:nowrap;  //强制在一行显示
    overflow:hidden;    //溢出的内容切割隐藏
    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…
    word-break:keep-all;  //允许在单词内换行
}

//table 必须加上该属性 td溢出隐藏效果才生效
table {
    table-layout:fixed;
}