div+css设置文字不换行

转载 2013年12月03日 09:21:56

当一行文字超过DIV或者Table的宽度的时候,浏览器中默认是让它换行显示的,如果我们不想让他换行显示那要怎么办呢?看到这个标题很容易就会想到截断文字加“...”的做法。

一般的文字截断(适用于内联与块):
==============CSS================ 
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
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会有“...”,其它的浏览器文本超出指定宽度时会隐藏。

转载于:“http://blog.csdn.net/herb777/article/details/7652343

相关文章推荐

div、td 、p 等容器内强制换行和不换行

1、强制不换行,同时以省略号结尾。 你好朋友朋友朋友我为什么不能看到效果啊 2、css自动换行 div{ word-wrap: break-word; word-break: norma...

DIV+CSS实操七:中文系内容模块控制文本不换行和超出指定宽度后用省略号代替

在做经管系主网页的同时也在进行着中文系主网页的构建,果然是只有自己去实践了,才能遇到各种各样的问 题,然后再去寻找解决这些问题的方法,最后进行修改和不断的调试,最后达到自己想要的效果。中文系主网页构...

设置div中文字超出时自动换行和css实现文本超出N行之后显示省略号等

一、对于div强制换行 1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 #wrap{white-space:normal; w...

解决 HTML div css 强制 换行 不换行

1、强制不换行,同时以省略号结尾。 你好朋友朋友朋友我为什么不能看到效果啊 2、css自动换行 div{ word-wrap: break-word; word-break: norma...

li内容不换行、div加滚动条

昨天在使用css结合div布局的时候碰到了一个问题。     在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里   ...

css 长单词不换行溢出容器的解决方法 word-wrap与word-break

这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是...

css中保证内容遇到空格或其他标点符号不换行

原文地址:  http://www.ossi.cn/2011-11/css-white-space/ 项目中遇到这么一个情况:一个规定宽度的DIV里面需要横向排列一span来放置数据,每...

css不换行相关易混属性

white-space :nowrap; word-break:keep-all; white-space  设置或检索对象内空格的处理方式。 white-space:normal | pr...

多个div能不换行吗?

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)