轉自:http://tieba.baidu.com/f?kz=669728589
关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果相同,所以省略 p。
文中“没有指定宽度的 td”是指:为 table 指定了宽度,但没有给 td 指定宽度。
强制不换行
div,
td
{
white-space:nowrap;
}
这点在 Firefox 的 div 和 td 中,以及 IE 的 div 中,均没有问题。在 IE 的 td 中却很复杂:
如果没有为 td 指定宽度,则上述代码仍然有效。
如果为 td 指定了宽度,并且文字中无标点、无空格,上述代码不再有效。可以加 word-break:keep-all; 解决,这是 CSS3 的内容,不过是 IE 最先提出的,所以 IE6 中也支持。
如果为 td 指定了宽度,并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。
综合起来,为了简单,使用:
div
{
white-space:nowrap;
}
只是为了兼容 IE 的 td 的不同情况,在文字与 td 之间套一层 div。
强制换行
强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaa)时不撑大布局。
div,
td
{
word-break:break-all;
}
word-
wrap:break-word; 兼容性不够广,所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、
Chrome 的 div、指定宽度的 td、没有指定宽度的 td,非常不错,遗憾的是 Firefox 中不支持这个属性,所以无效果,为了不让其挤
乱表格,可以加 overflow:hidden 来凑合着解决。
知其然知其所以然
上面介绍了三种属性:
white-space : normal | nowrap
word-wrap : normal | break-word
word-break : normal | break-all | keep-all
white-space
空白的处理方式,不止两个属性值,但在 IE6 中只支持这两个,所以不介绍其他的。
normal 多个连续英文空格压缩为一个英文空格显示,在空白处可换行。
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。
word-wrap
内容超过容器边界时是否断开转行。
normal 允许(只是允许,不是必须)内容顶开指定的容器边界。
break-word 内容将在边界内换行。
word-break
换行的方式。
normal 英文在标点和空白处换行,中文在任何地方换行。
break-all 英文和中文都在任何地方换行,比如从一个英文单词的中间拆开换行。
keep-all 英文和中文都在标点和空白处换行。
分享到:
相关推荐
兼容多浏览器的强制不换行的CSS,主要以DIV为列子,分析个浏览器的解析特性
1、强制不换行,同时以省略号结尾。 复制代码代码如下: <div xss=removed> 你好朋友朋友朋友我为什么不能看到效果啊 </div> 2、css自动换行 复制代码代码如下: div{ word-wrap: break-word; word-break: normal; ...
1.用标签实现不换行 ...3强制不换行 复制代码代码如下: div{ white-space:nowrap; } 4.如果是两个div,可使用float实现不换行 复制代码代码如下: <div class=”class1″>hello </div> <div cla
jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的...
DIV CSS 图片自动换行 图片带鼠标效果
主要介绍了td,div标签里内容不换行的方法,需要的朋友可以参考下
多个div能不换行吗?能否自动把父容器撑开?请下载直接运行即可。可直接与我联系,我一直在csdn。
DIV 文字可以换行但是纯数字和字母不可以换行解决方案
CSS控制Table单元格强制换行与强制不换行 我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 近日有此需要,但发现加上nowrap在某些情况下还是会换行!无奈,没有一个...
div模拟select兼容各浏览器,本人制作的小插件,解决下拉列表框不兼容的问题
NULL 博文链接:https://xieruilin.iteye.com/blog/1473020
一个div可自行编辑,任意输入文字可自动换边且不变形
介绍: 很多朋友都在问这个问题,div的内容图片垂直居中代码,这个代码兼容多浏览器。
点击按钮弹出一个层,其余部分遮罩,右上角有关闭功能,兼容各大浏览器
DIV弹出窗(兼容主流浏览器)
但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。 原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个...
css和js的浏览器兼容问题汇总,希望能帮到大家