search

Home >Web Front-end >HTML Tutorial >深入理解CSS中的空白符和换行 - 小火柴的蓝色理想

深入理解CSS中的空白符和换行 - 小火柴的蓝色理想

WBOY
WBOYOriginal
2016-05-21 08:42:141658browse
×
目录
[1]white-space [2]word-wrap [3]word-break

前面的话

　　CSS3新增了两个换行属性word-wrap和word-break。把空白符和换行放在一起说，是因为实际上空白符是包括换行的，且常用的文本不换行是使用的空白符的属性white-space: nowrap;但到底它们还有些什么属性值，以及有什么对应的用法。本文将就空白符和换行的内容做详细介绍和梳理

 

空白符

定义

　　空白符是指空格、制表符和回车；HTML默认已经把所有空白符合并成一个空格。

white-space

　　值: normal | nowrap | pre | pre-wrap | pre-line | inherit

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

<span style="color: #000000;">normal: 合并空白符，允许自动换行
nowrap: 合并空白符，不允许自动换行
pre</span>-<span style="color: #000000;">line: 合并空白符(不包括换行符)，允许自动换行
pre: 不合并空白符，不允许自动换行
pre</span>-wrap: 不合并空白符，允许自动换行

　　[注意]

元素默认带有样式white-space: pre;
<p>　　[注意]IE7-浏览器不支持pre-line和pre-wrap这两个属性值</p>
<div class="cnblogs_code">
<pre class="brush:php;toolbar:false"><span style="color: #0000ff;"><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #000000;">They can stay 72-hours 
    within the Shandong      province after they have entered China via the Qingdao International Airport.</span><span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>

 

文本换行

　　浏览器自身带有文本自动换行的功能，文本容器的右侧可以实现自动换行

　　对于英文来说，浏览器会在半角空格或连字符的地方自动换行，而不会在单词的中间突然换行

　　对于中文来说，可以在任何一个文字后面换行，但浏览器碰到标点符号时，通常将标点符号以及其前一个文字作为一个整体进行换行

　　所以实际上，white-space解决不了长单词或UTL地址的换行问题

word-wrap

　　word-wrap属性用来实现长单词或URL地址的自动换行

　　值: normal | break-word

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

word-<span style="color: #000000;">wrap:normal(浏览器只在半角空格或连字符的地方进行换行)
word</span>-wrap:<span style="color: #0000ff;">break</span>-word(截断单词换行，长单词从下一行开始)

　　[注意]当white-space的值是nowrap或pre时，word-break和word-wrap属性都失效

　　[注意]word-wrap在标准中被改为overflow-wrap，但由于兼容问题，一般还是使用word-wrap

word-break

　　CSS3使用word-break属性来决定自动换行的处理方法。通过具体的属性设置，不仅可以让浏览器实现半角空格或连字符后面的换行，而且还可以让浏览器实现任意位置的换行。

　　值: normal | break-all | keep-all

　　初始值: normal

　　应用于: 所有元素

　　继承性: 有

<span style="color: #000000;">normal: 中文到边界上的汉字换行，英文从整个单词换行
</span><span style="color: #0000ff;">break</span>-<span style="color: #000000;">all: 对于英文长单词来说，会截断单词换行，长单词占据当前行剩余空间。但对于中文的处理，各浏览器不一致
    [</span><span style="color: #800080;">1</span><span style="color: #000000;">]firefox及safari: 中文到边界上的汉字换行，且允许标点置于段首
    [</span><span style="color: #800080;">2</span><span style="color: #000000;">]IE及chrome: 中文到边界上的汉字换行，但不允许标点置于段首
keep</span>-<span style="color: #000000;">all: 对于英文长文本不能换行，但对于中文的处理，各浏览器不一致
    [</span><span style="color: #800080;">1</span><span style="color: #000000;">]firefox: 在空白符处换行
    [</span><span style="color: #800080;">2</span><span style="color: #000000;">]IE及chrome: 在空白符及标点处换行
    [</span><span style="color: #800080;">3</span>]safari: 不支持

　　[注意]移动端目前基本都不支持keep-all值　　

　　[注意]当word-break值为break-all时，word-wrap属性失效；否则两个属性都起作用

 

表格

　　对于表单元格的长文本来说，使用word-wrap或word-break来强制换行需要设置table-layout:fixed

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
Previous article：CSS：使用CSS媒体查询创建响应式布局 - McByeNext article：深入理解CSS弹性盒模型flex - 小火柴的蓝色理想

Related articles

See more