当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果不想让他换行要怎么办呢?
用CSS让文字在一行内显示不换行的方法:
一般的文字截断(适用于内联与块):
1 .text-overflow { 2 display:block; /*内联对象需加*/ 3 width:31em; 4 word-break:keep-all; /* 不换行 */ 5 white-space:nowrap; /* 不换行 */ 6 overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ 7 text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与 overflow:hidden;一起使用。*/ 8 }
对于表格,定义有点不一样:
1 table{ 2 width:30em; 3 table-layout:fixed; /* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */ 4 } 5 td{ 6 width:100%; 7 word-break:keep-all; /* 不换行 */ 8 white-space:nowrap; /* 不换行 */ 9 overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ 10 text-overflow:ellipsis; /* 当对象内文本溢出时显示省略标记(...) ;需与 overflow:hidden;一起使用。*/ 11 }