首頁  >  文章  >  web前端  >  与换行相关的css属性简单介绍_html/css_WEB-ITnose

与换行相关的css属性简单介绍_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:29:521505瀏覽

与换行相关的css属性简单介绍:
在css布局中可能需要人为的进行操作是否换行,如何换行,本章节就就做一下简单介绍。
一.word-break属性:
此属性用来设定文本如何进行换行。
语法结构:

 

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

 

参数解析:
1.normal:默认值,原则上规定在断字点换行,通俗的说就是在单词与语单词之间可以进行换行,但是如果单词特别的长,超出了行的长度,可以从单词内部断开进行换行。
2.break-all:此属性值能够实现强制将单词从内部截断实现换行效果,从"break-all"这个霸气的词就可以看出它的威力,比word-wrap属性
更多相关内容可以参阅CSS3的word-break属性详解一章节。 
二.word-wrap属性:
此属性和上面的word-break属性的作用类似,用来规定文本是否可以冲破容器,当然也是对于文本进行如何换行的处理。
语法结构:

 

word-wrap: normal | break-word

 

参数解析:
1.normal:默认值,允许文本超出容器边界。如果是汉字或者并非超长的英文单词进行换行处理,但是如果是超长的英文单词,则从单词内部断开进行换行。和word-break:normal功能一样。
2.break-word:此属性规定内容不能够超出容器边界,并且原则上不允许进行词内换行,但是如果单词超长的话,也会从单词内部断开进行换行。
更多相关内容可以参阅CSS3的word-wrap属性用法详解一章节。
word-break和word-wrap不同点可以参阅word-break属性和word-wrap属性区别一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=13395

更多内容可以参阅:http://www.softwhy.com/divcss/

 

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn