英文强制性换行css 应用css强制性英文单词断行编

2021-03-10 13:59 jianzhan

在做公司站的英文版的情况下,英文单词因为剩余的室内空间不够,致使全部单词都换行,导致单词之间的间隙太大。以下图

应用css特性word-break:break-all; 后的实际效果:以下图:

 

强制性不换行

拷贝编码
编码以下:

{
white-space:nowrap;
}

全自动换行

拷贝编码
编码以下:

{
word-wrap: break-word;
word-break: normal;
}

强制性英文单词断行

拷贝编码
编码以下:

{
word-break:break-all;
}

CSS设定不改行:

overflow:hidden 掩藏
white-space:normal 默认设置
pre 换行和别的空白标识符都将遭受维护
nowrap 强制性在同1行内显示信息全部文字,直至文字完毕或遭受 br 目标

设定强行换行:
word-break:
normal ; 按照亚洲地区語言和非亚洲地区語言的文字标准,容许在字内换行
break-all :  该个人行为与亚洲地区語言的normal同样。也容许非亚洲地区語言文字行的随意字内断掉。该值合适包括1些非亚洲地区文字的亚洲地区文字
keep-all :  与全部非亚洲地区語言的normal同样。针对汉语,韩文,日文,不容许字断掉。合适包括小量亚洲地区文字的非亚洲地区文字与之间的高宽比处理方法

英文不换行

CSS里再加 word-break: break-all; 难题处理。这个难题仅有IE才有,在FF下检测,FF能够自身加翻转条,这样也不危害实际效果

提议大伙儿做Skin时,记得在body里加 word-break: break-all; 这样能够处理IE的架构被英文撑开的难题

下列引入word-break的表明, 留意word-break 是IE5+特有特性

英语的语法:

拷贝编码
编码以下:

word-break : normal | break-all | keep-all

主要参数:

normal :  按照亚洲地区語言和非亚洲地区語言的文字标准,容许在字内换行
break-all :  该个人行为与亚洲地区語言的normal同样。也容许非亚洲地区語言文字行的随意字内断掉。该值合适包括1些非亚洲地区文字的亚洲地区文字
keep-all :  与全部非亚洲地区語言的normal同样。针对汉语,韩文,日文,不容许字断掉。合适包括小量亚洲地区文字的非亚洲地区文字

表明:

设定或查找目标内文字的字内换行个人行为。特别在出現多种多样語言时。
针对汉语,应当应用break-all 。
对应的脚本制作特点为wordBreak。请参考我撰写的别的书目。

示例:

拷贝编码
编码以下:

{word-break : break-all; }