white-space 各个值的含义DEMO

来源：互联网发布：淘宝知己知彼编辑：程序博客网时间：2024/06/09 02:51

保留空白保留回车自动换行pre是是否pre-wrap是是是pre-line是（合并）是是nowrap是（合并）否否normal否否是

按照上面4个变量的组合理论上应该有16个配置项目（包括空白及空白合并）

保留空白和回车

1.pre 有空白和回车，页面什么样子就是什么样子，并且不会自动换行（同<pre> 标签）

2pre-wrap 同pre，但是会自动换行

保留空白（合并后）和回车

3.pre-line 同pre-wrap，但是会合并多个空格

不保留空白(合并后)

4.nowrap 删除空格和回车并且不会自动换行

不保留空白和回车

5.normal 删除空格和回车，并且会自动换行

<!DOCTYPE html>

<html>
<head>
<title></title>
<meta charset="gbk">
<script src="http://g.tbcdn.cn/??kissy/k/1.4.2/seed-min.js"></script>
<style type="text/css">
.content {
height: 100px; width: 100px; border: 1px solid black ;
}
</style>

</head>
<body>
<div class="content">
hehe 我就是一
个测试(normal)
</div>
<div class="content" style="white-space: pre">
hehe 我就是一
个测试(pre)
</div>
<div class="content" style="white-space: pre-line">
hehe 我就是一
个测试(pre-line)
</div>
<div class="content" style="white-space: pre-wrap">
hehe 我就是一
个测试(pre-wrap)
</div>
<div class="content" style="white-space: nowrap">
hehe 我就是一
个测试(nowrap)
</div>

</body>

<script type="text/javascript">
KISSY.use("core", function (S) {

})
</script>
</html>

0 0