Home >Web Front-end >HTML Tutorial >与换行相关的css属性简单介绍_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:29:521535browse

与换行相关的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/

 

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn