脚本宝典收集整理的这篇文章主要介绍了div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
当一行文字超过DIV
或者Table的
宽度的时候，浏览器中默认是让它换行显示的，如果我们
不想让他换行显示那要怎么办呢？看到这个标题很容易就会想到截断文字加“
...”的做法。
一般的文字截断(适用于内联与块)：
==============CSS================
.text-overflow{
dis@R_
777_2266@:block;/*内联对象需加*/
width:31em;
word-
break:keep-all;/* 不换行 */
wh
ITe
-space:nowra
p;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
=================================
对于表格的话，定义有
一点不一样：
==============CSS================
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
=================================
注：这个东东只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。
脚本宝典总结
以上是脚本宝典为你收集整理的div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...全部内容，希望文章能够帮你解决div+CSS设置一行内文字超过宽度不换行且不显示截断文字加...所遇到的问题。
如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。