white-space
| 值 | 描述 |
|---|
| normal | 默认。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承 white-space 属性的值。 |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>white-space</title>
<style type="text/css">
div{ background:#EEE; margin:20px 0;}
.white-space-normal{width:100px; height:100px; background:#090; margin:5px; color:#333; white-space:normal;}
.white-space-pre{width:100px; height:100px; background:#090; margin:5px; color:#333; white-space:pre;}
.white-space-nowrap{width:100px; height:100px; background:#090; margin:5px; color:#333; white-space:nowrap;}
.white-space-pre-wrap{width:100px; height:100px; background:#090; margin:5px; color:#333; white-space:pre-wrap;}
.white-space-pre-line{width:100px; height:100px; background:#090; margin:5px; color:#333; white-space:pre-line;}
</style>
</head>
<body>
div.div-white-space-normal
<div>
<div class="white-space-normal">lovethewayyoulie</div>
</div>
div.div-white-space-pre
<div>
<div class="white-space-pre">love the way you lie</div>
</div>
div.div-white-space-nowrap
<div>
<div class="white-space-nowrap">lovethewayyoulie</div>
</div>
div.white-space-pre-wrap
<div>
<div class="white-space-pre-wrap">love the wa y you lie</div>
</div>
div.white-space-pre-line
<div>
<div class="white-space-pre-line">love the wa y you lie</div>
</div>
<br><br><br>
div.div-white-space-normal
<div>
<div class="white-space-normal">眼盖当做披肩落泪后涂眼线烈焰让唇百变这始终恐惧盖掩</div>
</div>
div.div-white-space-pre
<div>
<div class="white-space-pre">眼 盖 当做披肩 落泪后涂眼线 烈焰让唇百变 这始终恐惧盖掩</div>
</div>
div.div-white-space-nowrap
<div>
<div class="white-space-nowrap">眼盖当做披肩落泪后涂眼线烈焰让唇百变这始终恐惧盖掩</div>
</div>
div.white-space-pre-wrap
<div>
<div class="white-space-pre-wrap">眼 盖 当做披肩 落泪后涂眼线 烈焰让唇百变 这始终恐惧盖掩</div>
</div>
div.white-space-pre-line
<div>
<div class="white-space-pre-line">眼 盖 当做披肩 落泪后涂眼线 烈焰让唇百变 这始终恐惧盖掩</div>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
