CSS特性探秘系列(1):word

日期:2021-03-06 类型:科技新闻 

关键词:培训互动游戏h5,微信群互动大转盘,h5安全互动游戏,报名抽奖能互动的,微信互动游戏摇一摇

1、访问器自带的全自动换行
各访问器本身都带有全自动换行作用,当访问器显示信息文字的情况下会让文字在访问器或div元素的右端全自动换行。换市场行情况以下:

1.non-CJK:会在半角空格或连标识符(-)部位全自动换行,不容易在长单词的正中间换行

2.CJK(中日韩):能够在任何1个CJK字体样式后换行

3.CJK中包括non-CJK:non-CJK一部分按 non-CJK状况解决开展换行解决

4.CJK中含有标点标记时,访问器不容易让标点标记坐落于1个行的行首,会使标点标记和前1个标识符构成1个总体开展换行。

2、word-break:
特性及访问器适配

value description IE FF Chrome& Safari Operanormal访问器默认设置换行yesyesyesyeskeep-allCJK:不容许换行,non-CJK:与normal特性同样,IE中(针对CJK:在半空格、联接符或任何标点标记处换行),chrome&safari不适用(应用默认设置换行)yesyesnoyesbreak-all容许单词内换行,IE(不容许标点标记坐落于行首),FF&Chrome&Safari(容许标点标记坐落于行首)yesyesyesyes

3、word-wrap:
1.赋值:
normal:在半空格、联接符部位换行
break-word:容许在长单词(如URL详细地址)內部断行

2.适用全部访问器

4、案例

拷贝编码
编码以下:

<style type="text/css">
.box{width:100px;height:100px;border:2px solid #f00;color:#333;font:12px arial;margin-bottom:10px;}
.keepall{word-break:keep-all;}
.breakall{word-break:break-all;}
.breakword{word-wrap:break-word;}
</style>



拷贝编码
编码以下:

<div class="box keepall">
本身都带有全自动换行作用啊,AAAAAA BBBBBBBBBBBBB,CCCCCCCCC,的右端全自动换行。
</div>
此例中留意keep-all在不一样访问器中的适配,独特标记处的换行!
<div class="box breakall">
本身都带有全自动换行作用啊,AAAAAA BBBBBBBBBBBBB,CCCCCCCCC,的右端全自动换行。
</div>
此例中留意逗号的部位!
<div class="box breakword">
本身都带有全自动换行作用啊,AAAAAA BBBBBBBBBBBBB,CCCCCCCCC,的右端全自动换行。
</div>


5、word-break:break-all 与word-wrap:break-word差别?
看上图便可表明

参照连接:

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break