直接上代码
white-space 属性设置如何处理元素内的空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>white-space</title>
<style>
/*
white-space 取值
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
*/
.white-space-normal{
white-space: normal;
}
.white-space-pre{
white-space: pre;
}
.white-space-nowrap{
white-space: nowrap;
}
.white-space-pre-wrap{
white-space: pre-wrap;
}
.white-space-pre-line{
white-space: pre-line;
}
.white-space-inherit{
white-space: inherit;
}
</style>
</head>
<body>
<div>默认。 空白会被浏览器忽略。</div>
<div class="white-space-normal">默认。 空白会被浏览器忽略。</div>
<div class="white-space-pre">空白会被浏览器保留。 其行为方式类似 HTML 中的 pre 标签。</div>
<div class="white-space-nowrap" style="width:50px;border:1px solid red">文本不会换行，文本会在在同一行上继续， 直到遇到 <br> 标签为止。</div>
<div class="white-space-pre-wrap" style="width:200px;border:1px solid red">保留空白符序列， 但是正常地进行换行。</div>
<div class="white-space-pre-line">1合并空白符序列， 但是保留换行符。</div>
<div class="white-space-pre-line">2合并空白符序列，
但是保留换行符。</div>
<!-- 父元素 body 是 white-space: normal; 默认-->
<div class="white-space-inherit">空白会 被浏览器保留</div>
</body>
</html>
效果
