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;就可以解决这个问题了。
分享到：
相关推荐
<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>全是中文的情况。全是...
`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 下没有...
使用css属性word-break:break-all; 后的效果：如下图： 强制不换行 复制代码代码如下:{ white-space:nowrap; } 自动换行 复制代码代码如下:{ word-wrap: break-word; word-break: normal; } 强制英文单词断行...
语法：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`属性接受两个可能的值：`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 下没有任何...
`和`word-wrap: break-word;`或`word-break: normal;`。 - 示例代码： ```css td { white-space: nowrap; word-wrap: break-word; width: 100px; } ``` ### 总结 以上介绍的自动换行策略覆盖了从基本的...
`word-break` 和 `word-wrap` 是两个非常重要的CSS属性，它们主要用于处理文本内容在容器内的换行规则，特别是在处理非标准长度的单词或字符串时。在描述中提到的场景是在一个`table`元素中应用这些样式，以确保内容...
1. **使用`word-wrap`和`word-break`解决`td`中无法自动换行的问题**: ```html <td width="25%" style="word-wrap: break-word; word-break: break-all;" valign="bottom"> 文本测试信息...（重复） `...
本文将详细介绍`word-break: break-all`与`word-wrap: break-word`两种自动换行属性的区别及其应用场景。 #### 二、`word-break: break-all`详解 1. **定义与作用** - `word-break: break-all`是一个CSS属性值，...
总的来说，CSS中的自动换行涉及到`white-space`、`word-wrap`和`word-break`等属性，以及特定浏览器的兼容性处理。在处理连续数字和英文字符时，需要根据目标浏览器选择合适的解决方案。由于浏览器之间的差异，...
**word-break 和 word-wrap 属性的区别：** - `word-break: break-all`：在任意单词内部允许换行，可能会导致长单词被截断。 - `word-wrap: break-word`：尽可能保持单词完整，如果单词太长超出容器宽度，会将整个...
`word-wrap` 和 `word-break` 属性是CSS中用于控制文本在容器内换行方式的重要工具，它们帮助解决长单词或字符序列超出容器边界的问题。下面将详细介绍这两个属性及其默认行为。 一、浏览器默认处理文本换行 ...