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属性正确运用,也可以实现强制文本不换行的效果,不信你可以试试。

你可能感兴趣的:(html给文本换行)