CSS3 知识量：11 - 43 - 138
浏览器本身都具有让文本换行的功能，当文本长度超过容纳其容器的宽度时，文本会被自动换行。word-wrap属性用于增强文本换行显示的功能。
word-wrap的基本语法为：
word-wrap : normal | break-word
其参数的简要说明如下：
normal：只在半角空格或连字符的地方进行换行，属默认值。
break-word：在边界内换行。
下面是word-wrap的应用示例：
<!DOCTYPE html>
<html>
<head>
<title>文本换行</title>
<meta charset="UTF-8">
<style type="text/css">
.set_normal{
width: 300px;
margin: 10px;
border: 1px solid #ccc;
word-wrap: normal;
}
.set_break-word{
width: 300px;
margin: 10px;
border: 1px solid #ccc;
word-wrap: break-word;
}
</style>
</head>
<body>
<p class="set_normal">Once upon a time, there were three piggy brothers
who wanted to build their own house.The eldest built a thatched house,
the second built a wooden house, and the third felt that
the brick house was safe, so he built the brick house with difficulty.
oooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p class="set_break-word">Once upon a time, there were three piggy brothers
who wanted to build their own house.The eldest built a thatched house,
the second built a wooden house, and the third felt that
the brick house was safe, so he built the brick house with difficulty.
oooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p class="set_normal">从前有三只小猪兄弟，要盖属于自己的房子。老大盖了草屋，
老二建了木屋，老三觉得砖屋安全，艰难的建了砖屋。</p>
<p class="set_break-word">从前有三只小猪兄弟，要盖属于自己的房子。老大盖了草屋，
老二建了木屋，老三觉得砖屋安全，艰难的建了砖屋。</p>
</body>
</html>显示的效果为：
word-break属性用于决定自动换行的处理方法。不仅可以让浏览器实现半角空格或连字符换行，还可以实现任意位置换行。
word-break属性的语法为：
word-break : normal | break-all | keep-all
其参数简要说明如下：
normal：根据语言自己的规则来确定换行的方式。其中，中文到边界的汉字换行；英文从整个单词换行。
break-all：强行截断英文单词。
keep-all：不允许字断开。如果是中文就把标点符号内的一个汉字短语整个换行；如果是英文就把英文单词整个换行；如果英文字符长度超过边界，后面部分将撑破容器，如果边界固定，则英文字符后面部分无法显示。
下面是word-break属性的应用示例：
<!DOCTYPE html>
<html>
<head>
<title>文本换行</title>
<meta charset="UTF-8">
<style type="text/css">
.set_normal{
width: 350px;
margin: 10px 10px 30px 10px;
border: 1px solid #ccc;
word-break: normal;
}
.set_break-all{
width: 350px;
margin: 10px 10px 30px 10px;
border: 1px solid #ccc;
word-break: break-all;
}
.set_keep-all{
width: 350px;
margin: 10px 10px 30px 10px;
border: 1px solid #ccc;
word-break: keep-all;
}
</style>
</head>
<body>
<span>normal</span>
<p class="set_normal">Once upon a time, there were three piggy brothers
who wanted to build their own house.The eldest built a thatched house,
the second built a wooden house, and the third felt that
the brick house was safe, so he built the brick house with difficulty.
oooooooooooooooooooooooooooooooooooooooooooooooo</p>
<span>break-all</span>
<p class="set_break-all">Once upon a time, there were three piggy brothers
who wanted to build their own house.The eldest built a thatched house,
the second built a wooden house, and the third felt that
the brick house was safe, so he built the brick house with difficulty.
oooooooooooooooooooooooooooooooooooooooooooooooo</p>
<span>keep-all</span>
<p class="set_keep-all">Once upon a time, there were three piggy brothers
who wanted to build their own house.The eldest built a thatched house,
the second built a wooden house, and the third felt that
the brick house was safe, so he built the brick house with difficulty.
oooooooooooooooooooooooooooooooooooooooooooooooo</p>
<span>normal</span>
<p class="set_normal">从前有三只小猪兄弟，要盖属于自己的房子。老大盖了草屋，
老二建了木屋，老三觉得砖屋安全，艰难的建了砖屋。</p>
<span>break-all</span>
<p class="set_break-all">从前有三只小猪兄弟，要盖属于自己的房子。老大盖了草屋，
老二建了木屋，老三觉得砖屋安全，艰难的建了砖屋。</p>
<span>keep-all</span>
<p class="set_keep-all">从前有三只小猪兄弟，要盖属于自己的房子。老大盖了草屋，
老二建了木屋，老三觉得砖屋安全，艰难的建了砖屋。</p>
</body>
</html>显示的效果为：
white-space属性用于设置如果处理元素中的空白符。其语法为：
white-space : normal | pre | nowrap | pre-line | pre-wrap | inherit
其参数简要说明如下：
normal：空白处会被忽略，是默认值。
pre：空白处会被保留，类似于HTML的<pre>标签。
nowrap：文本不会换行，直到遇到换行标签<br/>。
pre-line：合并空白符序列，但保留换行符。
pre-wrap：保留空白符序列，但正常换行。
inherit：继承父元素的white-space属性值。
下面是white-space属性的应用示例：
<!DOCTYPE html>
<html>
<head>
<title>文本换行</title>
<meta charset="UTF-8">
<style type="text/css">
p{
width: 350px;
margin: 10px 10px 30px 10px;
border: 1px solid #ccc;
}
.set_normal{
white-space: normal;
}
.set_pre{
white-space: pre;
}
.set_nowrap{
white-space: nowrap;
}
.set_pre-line{
white-space: pre-line;
}
.set_pre-wrap{
white-space: pre-wrap
}
</style>
</head>
<body>
<span>normal</span>
<p class="set_normal">Once upon a time, there were three piggy brothers
who wanted to build their own house.</p>
<span>pre</span>
<p class="set_pre">Once upon a time, there were three piggy brothers
who wanted to build their own house.</p>
<span>nowrap</span>
<p class="set_nowrap">Once upon a time, there were three piggy brothers
who wanted to build their own house.</p>
<span>pre-line</span>
<p class="set_pre-line">Once upon a time, there were three piggy brothers
who wanted to build their own house.</p>
<span>pre-wrap</span>
<p class="set_pre-wrap">Once upon a time, there were three piggy brothers
who wanted to build their own house.</p>
</body>
</html>显示的效果为：
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6