`
流浪鱼
  • 浏览: 1682293 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

自动换行 word-break:break-all和word-wrap:break-word

    博客分类:
  • css
 
阅读更多

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整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

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)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为tableLayout。

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

我在网站上试验过确实不支持,你可以再W3C验证一下

分享到:
评论

相关推荐

    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");

    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>全是中文的情况。全是...

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

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

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

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

    浅析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: break-all;`**:结合使用这两个属性,可以确保即使在固定宽度的表格中,文本也能正确换行。 #### 知识点六:示例代码分析 文档中提供了一些具体的示例代码,可以帮助我们更好地理解上述概念...

    html 自动换行

    本文将详细介绍`word-break: break-all`与`word-wrap: break-word`两种自动换行属性的区别及其应用场景。 #### 二、`word-break: break-all`详解 1. **定义与作用** - `word-break: break-all`是一个CSS属性值,...

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

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

    网页英文自动换行代码

    ` 和 `word-wrap: break-word;` 这两个属性。这样不仅可以处理长单词或URL的自动换行问题,还能确保文本始终在容器内显示,提高用户体验。 **综合示例代码:** ```css #proinfodiv { height: 60px; /* 设置容器...

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

    - `keep-all`:保持单词完整,避免在非空白字符间换行,除非使用`word-wrap: break-word`。 3. **在`table`元素中的应用** - 在`table`元素中,`TABLE-LAYOUT: fixed`属性用于设置表格布局模式为固定,这样列宽...

    html中表格td内容自动换行

    * `word-break`:换行的方式,三个属性值:normal、break-all 和 keep-all。 使用 CSS 控制 TD 强制换行 使用 `style="word-wrap: break-word; word-break: break-all;"` 可以实现 TD 强制换行。 实例 ```html ...

    CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

    `word-wrap`属性接受两个可能的值:`normal`和`break-word`。 ```css word-wrap: normal || break-word; ``` - **`normal`**:这是`word-wrap`的默认值。它遵循标准的换行规则,意味着如果单词过长,它将会超出...

    英文自动换行怎样解决

    - **Break-word**:当内容超出容器边界时,文本会自动换行到下一行,并在必要时进行单词断行。这对于包含长单词或长字符串的英文文本特别有用。 ##### 2. `word-break` - **Normal**:这是默认值。它允许在单词内...

    css之自动换行.pdf

    对于连续的英文字符和阿拉伯数字,IE浏览器支持使用`word-wrap: break-word;`或`word-break: break-all;`来强制换行。例如: ```css #wrap { word-break: break-all; /* 或者word-wrap: break-word; */ width: ...

    CSS自动换行

    `和`word-wrap: break-word;`或`word-break: normal;`。 - 示例代码: ```css td { white-space: nowrap; word-wrap: break-word; width: 100px; } ``` ### 总结 以上介绍的自动换行策略覆盖了从基本的...

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

    二、`word-wrap: break-word` 属性值 在某些特殊情况下,比如长单词(如品牌名)或者连续的非空格字符序列,可能会导致文本溢出容器。这时,可以使用 `word-wrap: break-word;` 来处理这种情况: ```css word-wrap...

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

Global site tag (gtag.js) - Google Analytics