white-space详解
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
white-space详解white-space共有5种属性normal，nowrap，pre，pre-wrap，pre-line
⽹上的解释多半过于详细冗长，先做个简化处理,以便查询
normal 忽略空⽩过长换⾏
nowrap 忽略空⽩绝不换⾏
pre 保留空⽩⽆视限制
pre-wrap 保留空⽩过长换⾏
pre-line 忽略空⽩保留换⾏
实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>testWhiteSpace</title>
<style>
/*pre代表保留换⾏ wrap代表保留空⽩结合p本⾝性质*/
.a {
width: 200px;
}
.b1 {
/*默认忽略空⽩符仅保留⼀⼩段保障外部限制的前提下换⾏被动换⾏过长溢出*/
white-space: normal;
}
.b2 {
/*忽略空⽩符保留⼀⼩段绝对不换⾏⽆论外部限制除⾮遇见<br/>*/
white-space: nowrap;
}
.b3 {
/*保留所有空⽩⽆视外部限制*/
white-space: pre;
}
.b4 {
/*保留空⽩根据外部限制换⾏*/
white-space: pre-wrap;
}
.b5 {
/*合并空⽩保留换⾏*/
white-space: pre-line;
}
</style>
<script src="js/angular.js"></script>
</head>
<body>
<div class="a">4
<p class="b1">testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
</p>
</div>
<div class="a">
<p class="b2">testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
</p>
</div>
<div class="a">
<p class="b3">testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
</p>
</div>
<div class="a">
<p class="b4">testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
</p>
</div>
<div class="a">
<p class="b5">te
sttestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst
testtestetst testtestetst1111111111111111111111111111111111111111111111 </p>
</div>
</body>
</html>。