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;就可以解决这个问题了。
macroli
- 浏览: 53226 次
- 性别:
- 来自: 深圳
-
最新评论
相关推荐
<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属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似，但它们在处理文本换行的细节上有所不同，下面将详细...
`word-break:break-all` 和 `word-wrap:break-word` 是CSS中用于控制文本换行的两个属性，它们都有各自的特点和适用场景。 首先，`word-break:break-all` 的作用是在任何可能的位置强制进行单词内部的换行。这意味...
word-break:break-all和word-wrap:break-word表示强制换行，前者若英文字符过长自动截断，后者整个英文单词会换行！ 而而我常会这样用： 复制代码代码如下: word-wrap:break-word; overflow:hidden; IE 下没有...
语法：word-break: normal|break-all|keep-all; 默认值 normal 继承性 yes 版本 css3 Javascript语法 object.style.wordBreak="keep-all" 值 描述 normal 使用浏览器默认的换行规则。 break-...
综上所述，通过合理地使用 CSS 的 `white-space`、`word-wrap` 和 `word-break` 属性，我们可以有效地控制页面上的文本换行行为，并且考虑到不同浏览器的兼容性问题。这在实际的Web开发工作中是非常有用的技巧。
复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行： overflow:hidden 隐藏 white-space：normal 默认 pre 换行
本文将详细介绍`word-break: break-all`与`word-wrap: break-word`两种自动换行属性的区别及其应用场景。 #### 二、`word-break: break-all`详解 1. **定义与作用** - `word-break: break-all`是一个CSS属性值，...
综上所述，通过合理利用CSS中的 `word-break` 和 `word-wrap` 属性，可以有效地解决英文文本在网页中自动换行的问题。这对于提升用户阅读体验、美化网页布局等方面具有重要意义。开发者可以根据实际需求调整这些属性...
`word-break` 和 `word-wrap` 是两个非常重要的CSS属性，它们主要用于处理文本内容在容器内的换行规则，特别是在处理非标准长度的单词或字符串时。在描述中提到的场景是在一个`table`元素中应用这些样式，以确保内容...
* `word-break`：换行的方式，三个属性值：normal、break-all 和 keep-all。 使用 CSS 控制 TD 强制换行 使用 `style="word-wrap: break-word; word-break: break-all;"` 可以实现 TD 强制换行。 实例 ```html ...
`word-wrap`属性接受两个可能的值：`normal`和`break-word`。 ```css word-wrap: normal || break-word; ``` - **`normal`**：这是`word-wrap`的默认值。它遵循标准的换行规则，意味着如果单词过长，它将会超出...
兼容 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属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制属性 在CSS中，有几种属性可以用来控制文本的换行行为，包括`word-wrap`和`word-...
总的来说，CSS中的自动换行涉及到`white-space`、`word-wrap`和`word-break`等属性，以及特定浏览器的兼容性处理。在处理连续数字和英文字符时，需要根据目标浏览器选择合适的解决方案。由于浏览器之间的差异，...
`和`word-wrap: break-word;`或`word-break: normal;`。 - 示例代码： ```css td { white-space: nowrap; word-wrap: break-word; width: 100px; } ``` ### 总结 以上介绍的自动换行策略覆盖了从基本的...
`word-wrap` 和 `word-break` 属性是CSS中用于控制文本在容器内换行方式的重要工具，它们帮助解决长单词或字符序列超出容器边界的问题。下面将详细介绍这两个属性及其默认行为。 一、浏览器默认处理文本换行 ...