不同浏览器下word-wrap,word-break,white-space强制换行和不换行总结

强制换行与强制不换行用到的属性

我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地:

word-wrap语法:

word-wrap: normal(默认) | break-word

各个浏览器均能识别

参数:

normal: 允许内容顶开指定的容器边界。

break-word: 内容将在边界内换行。必要时会触发word-break(注意:请分辨清楚word-break和break-word这俩个是不同的东西,一为属性另为参数)。

说明:

word-wrap是控制是否“为词断行”的,设置或检索当前行超过指定容器的边界时是否断开转行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。

范例:

congratulation这个单词属于长串英文,word-wrap:break-word整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断,这就是对于长串文字不起作用的解释。word-wrap:normal是默认情况,英文单词不被拆开。

结论:

作用范围仅为div这类标准块级元素,th,td这类table元素虽然识别但是没有效果(如果为td,th加上宽度word-wrap在IE下是能够发挥效果的,但根据完全兼容性方便记忆角度上来说还是以前面的结论为准)。

word-break语法:

word-break: normal(默认) | break-all | keep-all

Firefox、Opera不能识别

参数:

normal: 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行。

break-all: 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

keep-all: 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本。

说明:

word-break:break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题(恰恰弥补了上面word-wrap:break-word对于长串文字不起作用的缺陷)。

范例:

继续以上面congratulation这个单词属于长串英文,word-break:break-all它会把单词截断,该行末端就会变成类似conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

word-break:keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)

结论:

作用范围仅为div这类标准块级元素,th,td这类table元素虽然识别但是没有效果(经测试Chrome下word-break:break-all是有效果的,但根据完全兼容性方便记忆角度上来说还是以前面的结论为准)。Firefox,Opera是无法识别word-break的,更不用提Firefox下的th,td中使用word-break的效果了。

white-space语法:

white-space: normal(默认) | pre | nowrap

参数:

normal: 默认。空白会被浏览器忽略。

pre: 空白会被浏览器保留。其行为方式类似HTML中的pre标签。

nowrap: 文本不会换行,文本会在在同一行上继续,直到遇到br标签为止。

说明:

对于pre属性,其实就是HTML中连续的多个空白符会被合并,然后为了不让他合并(最常用的场合就是表示代码文字缩进)让其中的空白符继续保留而不需要我们增加额外的样式和标签来控制它的缩进和换行。pre标签的原理也是一样的内部默认有了个white-space:pre。

对于nowrap属性,这个是强制不换行核心,一般强制不换行就是利用这个属性。Firefox的div和td中,以及IE的div中,均没有问题。唯一的瑕疵就是在IE的td中会有一个问题,如果td没有指定宽度,则nowrap仍然有效,如果td有宽度,并且文字中无标点、无空格(例如中文长串文字),nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。


==总结强制换行==:

如果在div这类标准块级元素中需要强制换行,最普遍的方案那就是word-wrap:break-word; word-break:break-all;此方式的缺点就是会导致如果恰巧该行末端宽为一个长串英文单词,那么该单词会被撕开的尴尬样式(而且FF不识别word-break,反而不会撕开这个单词)。个人认为如果你这个div里面放的类似于URL这个长串地址,那么用此方案是非常不错的选择(注意:由于FF不识别word-break,所以无法保证每行末端会整齐的断开URL单词,但这也是无奈的选择)。如果不是放置URL这类可以断开的长串英文,而是英文句子的话,那么使用word-wrap:break-word;即可。至于网上看到有word-wrap:break-word; overflow:hidden;这么个写法,据说可以兼容IE和FF,但经过亲自测试似乎没有什么特别效果。当然,如果你有更好的方案也可以留言参与讨论,这里也十分欢迎您的意见。

如果是在td,th这类table元素中需要强制换行,个人比较推荐的方式为:先为table设定table-layout:fixed,基本上设定完这个属性后基本的换行问题都能够解决而不会出现table中td,th因为里面各个内容的多寡发生抢夺其他td,th宽度的情形发生。这时如果你依旧有强制换行问题,那么在此td中内部加一层div,那么情况就会像上面讨论的方式来解决。


==总结强制不换行==:

强制不换行的问题到是比较容易分析的,就如上面所讨论的那样使用white-space:nowrap,Firefox的div和td中,以及IE的div中,均没有问题。唯一的瑕疵就是在IE的td中会有一个问题,如果td没有指定宽度,则nowrap仍然有效,如果td有宽度,并且文字中无标点、无空格(例如中文长串文字),nowrap则不再有效。解决方式就是可以加word-break:keep-all;可以解决此问题。综合下来,比较稳妥的方式是在文字与td之间再套一层div,然后使用nowrap,那么就是强制不换行。注意这时候很有可能文字会过多导致溢出容器,所以你还得加一个overflow:hidden,防止溢出容器,这样子就可以兼容各个浏览器了。

总结了那么多,发觉似乎也就那几个属性在浏览器里面的各种兼容性的平衡,现在似乎尚未有一个完美的方案可以全部兼容各个浏览器,我们所能做的最多的就是尽可能的保持个浏览器显示一致。如果你还是觉得一定要兼容所有的浏览器,那么最后的方案那么就是动用JS了,以后的文章中我会考虑从以最小的JS代价来满足此要求,但这暂不在本文所讨论的范围内。

一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。

解决方法(以IE,chrome,FF为测试浏览器):

{
word-break:break-all; /*支持IE,chrome,FF不支持*/
word-wrap:break-word;/*支持IE,chrome,FF*/
}
以下是对这两种方法的区别说明:

1、word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2、word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

3、

word-break:break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

word-wrap:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。

语法:word-break : normal | break-all | keep-all

参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

语法: word-wrap : normal | break-word

参数: normal : 允许内容顶开指定的容器边界

break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

建议:word-break 用W3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。

兼容 IE 和 FF 的换行 CSS 推荐样式

  最好的方式是word-wrap:break-word; overflow:hidden; 而不是word-wrap:break-word; word-break:break-all; 也不是word-wrap:break-word; overflow:auto;

原文地址:https://www.cnblogs.com/both-eyes/p/10082220.html

时间: 2024-11-05 18:33:56

不同浏览器下word-wrap,word-break,white-space强制换行和不换行总结的相关文章

word break和word wrap

默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(normal | break-word):表示是否要断词 word wrap break-word   [要断词] 独占一行(默认情况下单词太长就会被换到下一行去,所以就独占一行了)的单词被断开成多行, 默认值normal,则不断词,而是一行显示,超出容器 word break break-all:和上面相比

如何在浏览器网页中显示word文件内容

如何在浏览器网页中显示word文件内容 把word文件读到byte[]中,再Response.OutputStream.Write(bytes)到客户端去 Page_Load事件中写: //FileStream   fs   =   new   FileStream("c:\\1.doc",   FileMode.Open,   FileAccess.Read);  FileStream fs = new FileStream(Server.MapPath("files\\1

学习笔记---Javascript事件Event、IE浏览器下的拖拽效果

学习笔记---Javascript事件Event.IE浏览器下的拖拽效果     1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcElement(触发事件的事件源对象)和attachEvent("onclick",function(){...}); 2. a. 实现拖放(Drag and Drop): 目前支支持IE, 若定制某对象为可拖放对象, 则必须覆盖目标对象的dragenter和dragover事件, 可以用e

IE浏览器下getElementsByClassName()属性的使用

Q:getElementsByClassName() 在IE浏览器下不过正常使用,显示网页脚本错误. A:在js文件中加入下面的处理代码,就可以完美的解决这个问题了. // 解决IE不能使用getElementsByClassName()方法的问题 // 如果浏览器不能使用document .getElementsByClassName() if(!document.getElementsByClassName){ //那么把下面这个值赋予给gc document.getElementsByCl

IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3

关于图片的旋转,一般来说有3种解决方案:(1)滤镜 (2)css3 (3)canvas.接下来逐一讲解. 为了方便理解,我们主要以90度整倍数讲解,兼顾其他角度. 1. 滤镜(IE专属) 1.1 旋转滤镜 语法如下: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=i); rotation取值0(0或360度),1(90度),2(180度),3(270度).取其他数无效. 旋转90度示例: css: #box {     

解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题

首先要创建一个工具栏,并为工具栏中的放大.缩小按钮定义事件. <div id="toolbar" style="float:left;margin-top:5px;margin-left: 5px;line-height: 35px;"> <img src="src/images/zoomin.gif" action="zoomIn" title="放大" width="16&q

reverse the string word by word

题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is blue",return "blue is sky the". 要求: 1)首尾有空格的时候,反转后的string要将空格去掉 2)当string有多个连续空格的时候,只保留一个空格. 代码分析: 对多余空格剔除: 思路分析: 1)从原始s 的最末尾开始扫描,如果遇到空格,用whil

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法,跨域调用JS不再是难题!

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法 导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe  了第一博客的页面  http://www.diyibk.com/   当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

js禁止微信浏览器下拉显示黑底查看网址,不影响内部Scroll

开发项目跑在微信浏览器经常会遇到一个问题,微信浏览器下拉的时候会出现自带的黑色底色(显示网址)如下图: 网上好多js禁止操作的做法禁止了内部Scroll,导致页面不能滚动,上拉加载失效,例如这种做法: $('body').on('touchmove', function (event) {event.preventDefault();}); or document.addEventListener('touchmove', function(e){e.preventDefault()}, fal

IE浏览器下常见的CSS兼容问题

[1]IE6-浏览器下子元素能撑开父级设置好的宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin: 0; } ul{ margin: 0; padding: 0; list-style: none; } .list{