保留空白 | 保留回车 | 自动换行 | |
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>