white-space控制空白的处理行为
时间：06-15来源：作者：点击数：
white-space用于控制HTML元素对元素内文本中空白的处理方式。该属性支持如下几个属性值。
- normal:默认属性值。浏览器忽略文本中的空白。
- pre:浏览器保留文本中的所用空白，其行为方式类似于<pre.../>标签。
- nowrap:文本不会换行,文本会在同一行上继续，知道遇到<br.../>标签为止。
- pre-wrap:保留空白符序列，但可以正常换行。
- pre-line:合并空白符序列，但保留换行符。
- inherit:指定从父元素继承white-space属性的值。
下面页面代码示范了white-space属性对文本中空白的处理行为。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> white-space </title>
<style type="text/css">
/* 为div元素增加边框 */
div{
border:1px solid #000000;
height: 80px;
width: 240px;
}
</style>
</head>
<body>
<!-- 忽略文本中的空白、换行符 -->
white-space:normal <div style="white-space:normal">
The root interface in
the collection hierarchy. </div>
<!-- 保留文本中所有空白、换行符 -->
white-space:pre <div style="white-space:pre">
The root interface in
the collection hierarchy. </div>
<!-- 忽略文本中空白，换行符，强制不换行 -->
white-space:nowrap <div style="white-space:nowrap">
The root interface in
the collection hierarchy. </div>
<!-- 保留文本中空白序列，换行符 -->
white-space:pre-wrap <div style="white-space:pre-wrap">
The root interface in
the collection hierarchy. </div>
<!-- 合并文本中空白序列，保留换行符 -->
white-space:pre-line <div style="white-space:pre-line">
The root interface in
the collection hierarchy. </div>
</body>
</html>
效果图：
方便获取更多学习、工作、生活信息请关注本站微信公众号
湘公网安备 43102202000103号