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;
}