本文列举了兼容IE和FF的换行CSS推荐样式,详细介绍了word-wrap同word-break的区别。
兼容IE和FF的换行CSS推荐样式
最好的方式是
以下是引用片段:
word-wrap:break-word;overflow:hidden;
而不是
以下是引用片段:
word-wrap:break-word;word-break:break-all;
也不是
以下是引用片段:
word-wrap:break-word;overflow:auto;
在IE下没有任何问题,在FF下,长串英文会被遮住超出的内容。
word-wrap同word-break的区别
word-wrap:
normal Default.Contentexceedstheboundariesofitscontainer.
break-wordContentwrapstonextline,andaword-breakoccurswhennecessary.必要时会触发word-break。
word-break:
normal Default.Allowslinebreakingwithinwords.好像是只对Asiantext起作用。
break-allBehavesthesameasnormalforAsiantext,yetallowsthelinetobreakarbitrarilyfornon-Asiantext.ThisvalueissuitedtoAsiantextthatcontainssomeexcerptsofnon-Asiantext.
keep-allDoesnotallowwordbreakingforChinese,Japanese,andKorean.Functionsthesamewayasnormalforallnon-Asianlanguages.ThisvalueisoptimizedfortextthatincludessmallamountsofChinese,Japanese,orKorean.
总结如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese,Japanese,andKorean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于长串英文和英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto;ie下,长串会自动折行。ff下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。
另,测试代码如下:
1.htm
<style>
.c1{width:300px; border:1pxsolidred}
.c2{width:300px;word-wrap:break-word; border:1pxsolidyellow}
.c3{width:300px;word-wrap:break-word;word-break:break-all; border:1pxsolidgreen}
.c4{width:300px;word-wrap:break-word;word-break:keep-all;border:1pxsolidblue}
.c5{width:300px;word-break:break-all; border:1pxsolidblack}
.c6{width:300px;word-break:keep-all; border:1pxsolidred}
.c7{width:300px;word-wrap:break-word;overflow:auto; border:1pxsolidyellow}
</style>
.c1{width:300px; border:1pxsolidred}
<divclass="c1">asdasd
</div>
<divclass=c1>
ThisisallEnglish.ThisisallEnglish.ThisisallEnglish.
</div>
<divclass=c1>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<divclass=c1>
中英文混排的情况。ChineseandEnglish.中英文混排的情况。ChineseandEnglish.
</div>
<br>
.c2{width:300px;word-wrap:break-word;border:1pxsolidyellow}
<divclass="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<divclass=c2>
ThisisallEnglish.ThisisallEnglish.ThisisallEnglish.
</div>
<divclass=c2>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<divclass=c2>
中英文混排的情况。ChineseandEnglish.中英文混排的情况。ChineseandEnglish.
</div>
<br>
.c3{width:300px;word-wrap:break-word;word-break:break-all; border:1pxsolidgreen}
<divclass="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<divclass=c3>
ThisisallEnglish.ThisisallEnglish.ThisisallEnglish.
</div>
<divclass=c3>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<divclass=c3>
中英文混排的情况。ChineseandEnglish.中英文混排的情况。ChineseandEnglish.
</div>
<br>
.c4{width:300px;word-wrap:break-word;word-break:keep-all;border:1pxsolidblue}
<divclass="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<divclass=c4>
ThisisallEnglish.ThisisallEnglish.ThisisallEnglish.
</div>
<divclass=c4>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<divclass=c4>
中英文混排的情况。ChineseandEnglish.中英文混排的情况。ChineseandEnglish.
</div>
<br>
.c5{width:300px;word-break:break-all; border:1pxsolidblack}
<divclass="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<divclass=c5>
ThisisallEnglish.ThisisallEnglish.ThisisallEnglish.
</div>
<divclass=c5>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<divclass=c5>
中英文混排的情况。ChineseandEnglish.中英文混排的情况。ChineseandEnglish.
</div>
<br>
.c6{width:300px;word-break:keep-all; border:1pxsolidred}
<divclass="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<divclass=c6>
ThisisallEnglish.ThisisallEnglish.ThisisallEnglish.
</div>
<divclass=c6>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<divclass=c6>
中英文混排的情况。ChineseandEnglish.中英文混排的情况。ChineseandEnglish.
</div>
<br>
.c7{width:300px;word-wrap:break-word;overflow:auto; border:1pxsolidyellow}
<divclass="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<divclass=c7>
ThisisallEnglish.ThisisallEnglish.ThisisallEnglish.
</div>
<divclass=c7>
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<divclass=c7>
中英文混排的情况。ChineseandEnglish.中英文混排的情况。ChineseandEnglish.
</div>
分享到:
相关推荐
<asp:TemplateColumn HeaderText="OP CREATE USER" HeaderStyle-HorizontalAlign="center"> <HeaderStyle HorizontalAlign=... myDataGrid_d.Attributes.Add("style", "word-break:keep-all;word-wrap:normal");
复制代码代码如下:”c1″>safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</div><div class=c1>This is all English. This is all English. This is all English.</div><div class=c1>全是中文的情况。...
兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break... word-wrap同word-break的区别 word-wrap: normal Default. Content exceeds the boundaries of i
object.style.wordBreak="keep-all" 值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 兼容性: 举个栗子: CSS Co
复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行
当CSS3出现的时候,我们就可以用CSS3之文本换行word-wrap来解决这个问题了。下面就为大家介绍一下CSS3之文本换行word-wrap吧。 一、word-wrap的语法 1、语法 复制代码代码如下: word-wrap : normal || break-...
word-break:break-all和word-wrap:break-word表示强制换行,前者若英文字符过长自动截断,后者整个英文单词会换行! 而而我常会这样用: 复制代码代码如下: word-wrap:break-word; overflow:hidden; IE 下没有...
本文是CSS属性探秘系列的第一篇,详细介绍了word-break与word-wrap的异同与示例分析,非常简单实用,有需要的朋友可以参考下
先来认识一下两位主角word-wrap和word-break word-wrap用来控制换行 两种取值: (1)normal (2)break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不...
复制代码代码如下: div{ word-wrap: break-word; word-break: normal; } 3、css强制英文单词断行 复制代码代码如下: div{word-break:break-all;} 若是div嵌套,要使内层div根据内容自动换行,则可只设置外层的
在table中加入 style="WORD-WRAP: normal;TABLE-LAYOUT: fixed;word-break:normal" 总结如下.
复制代码代码如下:{ word-wrap: normal; /*浏览器对文本默认的自动换行处理*/} 如图:浏览器自动换行文本 二、break-word属性值 当然在网页排版中也会遇到一些特殊情况,例如:某个单词(某品牌的英文名称)够长...
PostCSS预设环境 使您可以将现代CSS转换为大多数浏览器可以理解的内容,并根据目标浏览器或运行时环境确定所需的polyfill。... overflow-wrap : break-word;}:--heading { background-image : image-set (url( im
word-wrap是控制换行的,可取:word-wrap:break-word | normal | break-all | keep-all break-word:它主要用来是控制是否将强制把单词换行,对于中英中文没有任何问题,但是对于长串的英文无效。 normal:英文单词...
word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-...
我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属性到底是做什么用地: word-wrap语法: word-wrap: ...
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认...1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all;
对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素... } 1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行 #wrap{word-break:break-all; wi