html给文本换行,CSS长文本换行

在网页设计中，我们常常会发现文本在容器中的换行和我们理想的不一样，这导致不对齐溢出等不美观现象。那么我们怎么来控制长文本的换行呢？用CSS即可完成。

一、DIV、P等块级元素的换行控制

1、当我们定义一个区块的宽度时，文本到达宽度的时候会自动进行换行。例如：

2、在区块中连续的英文默认不会换行，我们用word-wrap:break-word;或word-break:break-all;实行强制换行(只在IE中有效)。

如果在#test中出现了连续的英文，你就会发现即使英文的宽度超出了200px，也不会自动换行，而会溢出区块。你可以使用

3、在firefox中word-wrap:break-word;或word-break:break-all;无效，我们只能为

块添加滚动条来实现这一情况了：

二、在表格table中的换行控制

1、为table添加table-layout: fixed;

2、为table中的td、th添加word-break: break-all;word-wrap:break-word;

不过上面的方法也只有在IE中有效。

3、firefox中，仍然需要用滚动隐藏的方法，为td、th添加overflow:hidden;

三、简单介绍white-space

white-space:normal|pre|nowrap

normal：默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行

pre：换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ，此属性可以使用，但是不会发生作用。结果等同于 normal 。

nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象。

通过上面的这些方法，我们即可实现通过CSS长文本换行。同时，这几个CSS属性正确运用，也可以实现强制文本不换行的效果，不信你可以试试。