【CSS】div图层边界对英文换行控制的问题_html/css

【CSS】div图层边界对英文换行控制的问题_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:51:35

asal

1191 orang telah melayarinya

没有写过英文版的网页不知道，

写过也未必知道，

在网页中，把英文放在div里面的话，

div对于长单词，采用优先原则，

允许英语长单词超出我这个div的宽度，

比如如下的代码：

<div style="width:100px; background:#dddddd">I am a looooooooooooooooooooooooooooooooooooooooong word!</div>

Salin selepas log masuk

本来我设置了这个图层的宽度是100px，希望里面的所有东西，遇到边界自动换行，即得到如下效果：

可是得到了如下效果：

这是由于div默认对于长单词是不打断了，默认让其溢出，

为了使这条边界严格起来，我们必须为这个图层的style加上word-break:break-all或者word-wrap:break-word;属性，这个两个属性连IE5.5都支持，可是不知道为何Adobe Dreamweaver CS5没有这个代码提示。

word-break:break-all，是根据字母为单位打断，每一个字母都是可打断的，比如“I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!”：

break-all是这样的：

代码则如下：

<div style="width:100px; background:#dddddd; word-break:break-all;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>

Salin selepas log masuk

还有一种是word-wrap:break-word;，这相对于word-break:break-all而已，以单词为打断单位，也就是向word等编辑器那样，这种打断方式更符合西方人习惯，但对于我自己来说，还是上面的word-break:break-all好看点，对于一些实在无法处理的长单词，它只好以字母为单位打断：

代码则如下：

<div style="width:100px; background:#eeeeee; word-wrap:break-word;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>

Salin selepas log masuk

以下是三种效果的对比与代码，故意给图层抹上灰色背景，让大家看清楚宽度，第一种是什么属性都不加，一种是在style中加上word-break:break-all，另一种是加上word-wrap:break-word;：

breakwordI am a looooooog looooooooooooooooooooooooooooooooooooooooong word!
<div style="width:100px; background:#dddddd; word-break:break-all;">I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!</div>
I am a looooooog looooooooooooooooooooooooooooooooooooooooong word!

Salin selepas log masuk