> 웹 프론트엔드 > HTML 튜토리얼 > 【CSS】div图层边界对英文换行控制的问题_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:51:35
원래의
1191명이 탐색했습니다.

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

写过也未必知道,

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

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

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

比如如下的代码:

<div style="width:100px; background:#dddddd">I am a looooooooooooooooooooooooooooooooooooooooong word!</div>
로그인 후 복사

本来我设置了这个图层的宽度是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>
로그인 후 복사

还有一种是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>
로그인 후 복사

以下是三种效果的对比与代码,故意给图层抹上灰色背景,让大家看清楚宽度,第一种是什么属性都不加,一种是在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!
로그인 후 복사

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿