Html和Css中的空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css空格</title>
<style>
.test1,.test2,.test3,.test4,.test5{
display: block;
width: 100px;
height: 230px;
background:red;
}
.test3{
white-space:pre;
}
.test4{
white-space:pre-wrap;
}
.test5{
white-space:pre-line;
}
body{
padding-bottom: 500px;
}
</style>
</head>
<body>
<h3>正常</h3>
<p class="test1">我若有先知讲道之能，也明白各样的奥秘，各样的知识，而且有全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
<h3>空格</h3>
<p class="test2">我若 有先知讲道 之能，也明白各样的奥秘，各样的知识，而且有全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
<h3>white-space:pre</h3>
<p class="test3">我若有先知讲道 之能，也明白各样 的奥秘，各样的知识，而且有 全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
<h3>white-space:pre-wrap</h3>
<p class="test4">我若有先知讲道 之能，也明白各样 的奥秘，各样的知识，而且有 全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
<h3>white-space:pre-line</h3>
<p class="test5">我若有先知讲道 之能，也明白各样 的奥秘，各样的知识，而且有 全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
等价于
<p class="test1">我若有先知讲道 之能，也明白各样 的奥秘，各样的知识，而且有 全备的信，叫我能够移山，却没有爱，我就算不得什么。</p>
</body>
</html>结果：
