white-space 属性处理元素中的空白，但很多人经常把它和文字打断换行混淆，其实两者完全不一样。
先看下面一段代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 400px;
height: 300px;
background: lightgreen;
}
</style>
</head>
<body>
<div class="box">
世界上最遥远的距离 The furthest distance in the world不是生与死的距离isnotthewayfrombirthtotheend.ItiswhenIstandinfrontofyou
你却不知道我爱你 but you don't understand I love you.
世界上最遥远的距离 The furthest distance in the world
不是我就站在你面前 is not when I stand in front of you
你却不知道我爱你 you don't know I love you
而是爱到痴迷 It is when my love is bewildering the soul
</div>
</body>
</html>
浏览器演示效果：
浏览器演示效果
结果表明：
- 原先在文档中预留的换行符没有生效
- 原先在文档中预留的多个空白字符最后只展示了一个
解释一下为什么会出现这种情况：浏览器在解析代码时，在默认情况下
- 遇到多个空白符会合并成一个显示；
- 遇到换行符会处理成空白符来显示。
为了使代码按照我们的需求演示效果，所以有了white-space属性
具体演示效果，看官网文档自行跑一遍代码即可https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space
本人在此想着重强调它与文字打断换行的区别：
white-space只能处理空白符和换行符，无法处理长单词，如果单词过长始终溢出盒子，无论怎样调节white-space都是无用的，必须使用word-break。
image.png
网友评论