CSS文本自动换行实现

1、单词自动换行

div{width:400px;word-break:break-word;}

2、按内容换行

div是块级元素，每个单独占一行；可以用display: inline-block将多个div强制显示在一行，这样当多个div的内容可以显示在一行时就显示在一行，如果加起来超过一行就自动分行显示

.tel{width:400px;background: #bbb;margin: 0 auto;padding: 10 0px;word-break: break-word;}.desc{display: inline-block;}

<divclass="tel"><divclass="desc">Within the United States:&nbsp;</div><divclass="desc">888-9999-000&nbsp;</div><divclass="desc">English: 08:30-12:00 13:00-20:00&nbsp;</div></div>

这个方法对大多数浏览器都是有效的，但如果是用作邮件模板在outlook中display: inline-block无效，原因是outlook是重table设计，div的style不起作用。

Outlook 2000–03 Partial. Supports block, inline, list-item, and none.
Outlook 2007–16 Partial. Sometimes supports none.
Outlook Express Partial. Supports block, inline, list-item, and none.