Heim > Web-Frontend > HTML-Tutorial > 【CSS】div图层边界对英文换行控制的问题_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:51:35
Original
1195 Leute haben es durchsucht

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

写过也未必知道,

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

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

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

比如如下的代码:

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

本来我设置了这个图层的宽度是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>
Nach dem Login kopieren

还有一种是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>
Nach dem Login kopieren

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


breakword
I 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!
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage