CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现

一般的文字截断（适用于内联与块）：

1. .text-overflow {   
2.     display:block;  
3.     width:31em;  
4.     word-break:keep-all;  
5.     whitewhite-space:nowrap;  
6.     overflow:hidden;  
7.     text-overflow:ellipsis;  
8. }  

对于表格文字溢出的定义：

对于表格超出范围显示省略号

1. table{   
2.     width:30em;   
3.     table-layout:fixed;  
4. }   
5.   
6. td{   
7.     width:100%;   
8.     word-break:keep-all;  
9.     whitewhite-space:nowrap;  
10.     overflow:hidden;  
11.     text-overflow:ellipsis;  
12. }  

需要你注意的是，这个CSS样式只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，

其它的浏览器文本超出指定宽度时会隐藏。

以上这篇CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。