HTML+CSS段落样式裁剪,word-break;word-wrap;

2017-08-22 20:36:03来源:CSDN作者:re_raise人点击

分享

本文将介绍关于段落样式裁剪的两部分内容,一部分是设置换行,另一部分是强制不换行

主要涉及到的属性有:

word-break;

word-wrap;

white-space;

over-flow;

text-overflow;

     


1.下面是w3cschool上对这两属性的描述,通俗地来讲,就是设置段落在什么时候进行换行;



测试,中英文实时对比

(1)取word-break:normal;//表示默认浏览器换行设置;

  取word-wrap:normal;//同上;


结果如图;得到浏览器默认的换行规则。


(2)取word-break:break-all;//表示允许在单词内换行

  取word-wrap:break-word;//表示在长单词和url地址可以换行


得到结果如下图;发现,

中文字样一致。

英文单词与描述一致,前者可在单词内换行,后者长单词可以在内部换行。


(3)取word-break:keep-all;//表示只能在半角空格或连接符处才可以换行

得到如图;其中空格及连接符默认半角,如图,仅仅在连接符处采取了换行,第四行后面的字数太多,因此在此就换行了;英文段落也是如此。


           

以上是设置换行属性,下面介绍强制不换行属性设置;


2.设置属性white-space;

文本超出所在范围时,需要属性overflow来设置范围之外的文本的处理

属性:overflow

属性值:visible:范围之外的内容不会被修剪,溢出的内容会呈现在元素内容范围之外

hidden:范围之外的内容会被修剪,且不可查看

scroll:范围之外的内容会被修剪,但浏览器会显示滚动条来查看被修剪掉的内容

auto:表示如果溢出的内容被修剪,浏览器会自动设置滚动条

当容器内的文本超出范围后,使用text-overflow用来产生省略号,

属性:text-overflow

属性值:ellipsis:显示省略号代替被修剪的文本

举例:段落

设置:white-space:nowrap;

overflow:nowrap;

text-overflow:ellipsis;


结果如图

微信扫一扫

第七城市微信公众平台