长英文换行

1. 探索CSS换行
Tid Peunzhang

2. 我们会遇到这样问题
• 长单词或长字段溢出容器

3. 长单词或长字段溢出DIV容器

4. 长单词或长字段溢出DIV容器
• 样式和结构
<style type="text/css">
body{background:#ccc;}
div{width:150px;height:150px;border:5px #F00 dotted;
margin:50px;font-size:30px;}
</style>
<div>Hi<br />ttttttttttttttttttttttttttttttttttttt<br />you</div>

5. 长单词或长字段溢出表格

6. 长单词或长字段溢出表格
• 样式和结构
<style type="text/css">
body{background:#ccc;}
div{width:150px;height:150px;margin:50px;font-size:30px;
border:3px solid #000;}
</style>
<div>
<table>
<tr><td>表格</td></tr>
<tr><td>Hi<br />tttttttttttttttttttttttttttttt<br />you</td></tr>
</table>
</div>

7. 长单词或长字段溢出表格实例

8. 百度下，我们解决了这个问题
• break-word 和 break-all

9. 普通容器解决方案
• 针对Div容器所写的Css代码
word-wrap:break-word
word-break:break-all

10. 表格解决方案
• 针对Div容器中的表格所写的Css代码
table-layout:fixed
word-wrap:break-word
word-break:break-all

11. 我们这样解决了这个问题

12. 长单词和字段被强行断行了
• 再次遇到这个“bug”，再次就这样修
复了… ，开始产生了疑问：Why

13. Do you know word-wrap?
• word-wrap（自动换行）
属性一：normal
控制连续文本换行
属性二： break-word
内容将在边界内换行

14. Whart is word-break?
• word-break（字内断开）
属性一：normal :
允许在字内换行
属性二：break-all :
任意字内断开
属性三： keep-all
不允许字断开

15. 区分word-wrap和word-break
• word-wrap:break-word
该行末端宽度不够显示整个单词，它会自动把
整个单词放到下一行，而不会把单词截断掉的
• word-break:break-all
该行末端宽度不够显示整个单词，它会把单词
截断

16. 使用word-wrap 还是 word-break
• word-wrap, word-break 为IE的私有
属性，随后其他浏览器也不同程度
地实现了其中的某些，之后，被吸
纳为 CSS3 标准，问题是有些浏览器
还不支持。

17. 测试

18. 短英文数字Demo

19. Demo1 短字段的DIV容器
• 默认自动换行，但浏览器展示不一致
IE

20. Demo1 短字段的DIV容器
• 默认自动换行，但浏览器展示不一致
Firefox

21. Demo1 短字段的DIV容器
• 默认自动换行，但浏览器展示不一致
Chrome

22. Demo2 短字段的表格容器
• 默认自动换行，但浏览器展示不一致
IE

23. Demo2 短字段的表格容器
• 默认自动换行，但浏览器展示不一致
Chrome、firefox

24. 长英文数字Demo

25. 这6个按钮为测试用
1.overflow:hidden 溢出隐藏
2.overflow:auto 溢出自动
3.white-space:nowrap 禁止换行
4.word-wrap:break-word 边界内换行
5.word-break:break-all 词内换行
6.table-layout:fixed 固定表格

26. 勾选以下按钮起作用

27. Demo1 被撑破的容器
• Div容器，被长字段撑破

28. Demo1 被撑破的容器
• 只勾选按钮4,在所有浏览器显示正常

29. Demo1 被撑破的容器
• 只勾选按钮5，火狐无效，其它正常

30. Demo2 被撑破的表格
• 5列的表格，被长字段撑破

31. Demo2 被撑破的表格
• 只勾选按钮4,在所有浏览器中无效

32. Demo2 被撑破的表格
• 勾选按钮4和6,所有浏览器显示正常

33. Demo2 被撑破的表格
• 只勾选按钮5，火狐无效，其它正常

34. 更多Demo，请下载附件

35. 6个按钮在测试结果
1.overflow:hidden 溢出隐藏
表格中失效
2.overflow:auto 溢出自动
正常使用
3.white-space:nowrap 禁止换行
正常使用
4.word-wrap:break-word 词内换行
只支持连续的英文和数字，在表格中失效
5.word-break:break-all 边界内换行
支持包括英文和数字的词句短，在火狐中失效
6.table-layout:fixed固定表格
启动该属性可在表格中支持word-wrap:break-word;overflow:hidden

36. 总结

37. 对Div容器
• 在遇到容器宽度不够的情况下，建
议方法是
word-wrap:break-word

38. 对Div容器
• 其实浏览器的默认状态已经调整的很
好了，长单词长字段出现的概率是比
较小的，问题主要而在于设计，如容
器的宽度不够，像遇到日期2012-2-31
这种情况，设置容器宽度合理即可。

39. 对Div容器
• 少数太长的情况可考虑添加连字符
“-”或者<br>使它自动断开，最后设
置 overflow: hidden; 避免视觉上的
溢出。

40. 对表格
• 在遇到容器宽度不够的情况下，解
决的方法是
word-wrap:break-word
table-layout:fixed
• 另外，考虑添加连字符“-”或者<br>
使它自动断开

41. 对表单中用户输出的内容
• 如评论或者链接：
1111111111111111111111111……..
http://juhui.tenpay.com/goods/opera
te/position.shtml
可使用 word-wrap: break-word; 来强
行截断。

42. 完