`

word-break:break-all和 word-wrap:break-word区别

 
阅读更多
 
查看文章
   
自动换行word-break:break-all和word-wrap:break-word的区别
2007-11-26 15:15
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
它们的区别就在于:
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
WORD-WRAP:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。

还有,我在做KingCMS模板的时候,碰到easyarticle[list](此为5.0版本所含文件)页面。这个页面是个文章列表, 其中有个 (king:description size="200"/)的标签,也就是说其描述是200个字符,因为默认的模板比内容div容器比较大,所以能正常显示,但当size设置为400的时候,超过内容div容器的时候,右栏的内容就会被顶到下面去,所以这时候在class中设置下word-wrap: break-word;就可以解决这个问题了。
 
分享到:
评论

相关推荐

    webfrom-列表文本内容自动换行 word-break-keep-all;word-wrap-n.pdf

    <asp:TemplateColumn HeaderText="OP CREATE USER" HeaderStyle-HorizontalAlign="center"> <HeaderStyle HorizontalAlign=... myDataGrid_d.Attributes.Add("style", "word-break:keep-all;word-wrap:normal");

    word-break:break-all和word-wrap:break-word区别总结

    `word-break:break-all` 和 `word-wrap:break-word` 是CSS中用于控制文本换行的两个属性,它们都有各自的特点和适用场景。 首先,`word-break:break-all` 的作用是在任何可能的位置强制进行单词内部的换行。这意味...

    浅析word-break work-wrap的区别

    语法:word-break: normal|break-all|keep-all; 默认值 normal 继承性 yes 版本 css3 Javascript语法 object.style.wordBreak="keep-all"   值 描述 normal 使用浏览器默认的换行规则。 break-...

    css中强制换行word-break、word-wrap、white-space区别实例说明

    复制代码代码如下:”c1″>safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</div><div class=c1>This is all English. This is all English. This is all English.</div><div class=c1>全是中文的情况。全是...

    css文本换行属性word-wrap和white-space使用总结

    word-break:break-all和word-wrap:break-word表示强制换行,前者若英文字符过长自动截断,后者整个英文单词会换行! 而而我常会这样用: 复制代码代码如下: word-wrap:break-word; overflow:hidden; IE 下没有...

    word-wrap与word-break 属性的概述及浏览器默认处理

    `word-wrap` 和 `word-break` 属性是CSS中用于控制文本在容器内换行方式的重要工具,它们帮助解决长单词或字符序列超出容器边界的问题。下面将详细介绍这两个属性及其默认行为。 一、浏览器默认处理文本换行 ...

    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 下没有任何...

    英文强制换行css 使用css强制英文单词断行代码

    复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行

    html 自动换行

    为了同时满足中文的阅读习惯和英文长单词的显示需求,我们可以结合使用`word-break: break-all`和`word-wrap: break-word`。 **HTML代码示例**: ```html <div style="width: 200px; border: 1px solid #000;"> ...

    css word-break word-wrap 前台显示自动换行

    `word-break` 和 `word-wrap` 是两个非常重要的CSS属性,它们主要用于处理文本内容在容器内的换行规则,特别是在处理非标准长度的单词或字符串时。在描述中提到的场景是在一个`table`元素中应用这些样式,以确保内容...

    bbs.qq.com.zip_Wrap Style

    qq论坛源码,含图标,* 基本定义 */ ....CONTENT { overflow:auto word-break:break-all word-wrap:break-word } .HREF { cursor:pointer } TABLE.TableFixed { table-layout:fixed } XMP { display:none }

    CSS属性探秘系列(一):word-break与word-wrap

    最后,我们讨论了word-break:break-all与word-wrap:break-word的区别。它们看似相似,实际上在实际使用中可能会有细微差别,通常通过实际的显示效果来观察和理解。在某些情况下,可能会出现需要选择使用其中一个属性...

    CSS 文字自动换行

    综上所述,通过合理地使用 CSS 的 `white-space`、`word-wrap` 和 `word-break` 属性,我们可以有效地控制页面上的文本换行行为,并且考虑到不同浏览器的兼容性问题。这在实际的Web开发工作中是非常有用的技巧。

    网页英文自动换行代码

    综上所述,通过合理利用CSS中的 `word-break` 和 `word-wrap` 属性,可以有效地解决英文文本在网页中自动换行的问题。这对于提升用户阅读体验、美化网页布局等方面具有重要意义。开发者可以根据实际需求调整这些属性...

Global site tag (gtag.js) - Google Analytics