设置文本溢出省略号，换行

最简单的省略号（单行，溢出隐藏）

p{
overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;
}

 

效果：

多行省略号

p{
display: -webkit-box;

-webkit-box-orient: vertical;

/*设置省略号在容器第四行文本后*/
-webkit-line-clamp: 4;
overflow: hidden;
}

效果：

局限性：
使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp
　　因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
　　-webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。超出必须隐藏。
　　将height设置为line-height的整数倍，防止超出的文字露出。

 

 

设置换行操作

1、自动换行

div{
   word-wrap:break-word;
   word-break:normal;
}

2、强制不换行

div{
   white-space:nowrap;
}

3、强制英文单词换行

div{
   word-break:break-all;
}

4、单行文本不换行多余文本显示省略号

div{
   width:200px;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}

5、多行文本超出隐藏多余文本显示省略号

div{
   display:-webkit-box;
   overflow:hidden;
   text-overflow:ellipsis;
   -webkit-line-clamp:3;
   -webkit-box-orient:vertical;
}

6、table表格中单元格单行文本不换行

table{
   table-layout:fixed;
}
table tr td{
   width:60%;
   white-space:nowrap;
   overflow:hidden;
   text-overflow:ellipsis;
}