文字超出部分自動換行、省略

table的td中超出部分如何設置自動換行？

對於td中內容為連貫的英文字符串或者數字串，默認總是不換行，列寬會撐開。

解決方法：

table{
　　table-layout:fixed;
}

td{
    word-break:break-all;
    word-wrap:break-word;
}

 

超出部分省略號顯示

解決方法：

1、單行省略

<p>這是一段特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別特別長的文字</p>

p{
    width: 250px;/*需要配合寬度來使用*/
    overflow: hidden;/*超出部分隱藏*/
    text-overflow:ellipsis;/* 超出部分顯示省略號 */
    white-space: nowrap;/*規定段落中的文本不進行換行 */
}

 

2、多行省略

p{　
　　width: 250px;　
　　overflow: hidden;　
　　display: -webkit-box;/*將對象作為彈性伸縮盒子模型顯示*/
　　-webkit-box-orient: vertical;/*設置伸縮盒對象的子元素的排列方式*/ 
　　-webkit-line-clamp: 3;/*限制在一個塊元素顯示的文本的行數。*/ 
}