一、属性介绍

white-space 属性设置处理元素内的空白-Space(空格)、Enter(回车)、Tab(制表符)
我们在开发中应该知道，在div中无论我们敲多少空格和回车，显示在页面上的都会是一个空格。
那么空格和回车具体应该怎么显示？这就是white-space 属性存在的意义
注：当前文章只使用中文文本举例，英文或者数字文本还受word-break、word-wrap等属性影响
例如：

      .box {display: block;width: 200px;height: 200px;margin: 20px;padding: 0;border: 1px solid #000;font-size: 14px;font-family: sans-serif;}

<div class="box">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇    啦啦啦啦啦了了了了了了
</div>

1. 属性值

二、具体使用

1. normal

white-space: normal 所有空格、回车、制表符都合并成一个空格，文本自动换行
这就是div、p等一些标签默认的设置

2. nowrap

white-space: nowrap 所有空格、回车、制表符都合并成一个空格，文本超出不换行
我们在做文本超出隐藏功能时经常需要设置这个属性

<div class="box" style="white-space: nowrap">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇    啦啦啦啦啦了了了了了了
</div>

3. pre

white-space: pre 所有空格、回车、制表符都原样输出，文本超出不换行
这其实就是pre标签的默认设置

<div class="box" style="white-space: pre">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇    啦啦啦啦啦了了了了了了
</div>

4. pre-wrap

white-space: pre-wrap 所有空格、回车、制表符都原样输出，文本超出换行

<div class="box" style="white-space: pre-wrap">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇    啦啦啦啦啦了了了了了了
</div>

5. pre-line

white-space: pre-line 所有空格、制表符都合并为一个空格（忽略句首空格），回车原样输出，文本超出换行

<div class="box" style="white-space: pre-line">哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇    啦啦啦啦啦了了了了了了
</div>

三、文本换行案例

当我们给div设置因为单词超出换行时，我们可能会这样设置

<div class="box" style="word-break: break-all">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</div>

但是pre标签中好像无法生效

<pre class="box" style="word-break: break-all;">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</pre>

其实这就是white-space的原因，因为white-space: pre;时文本超出不换行的，这个时候我们就需要设置white-space为pre-wrap

<pre class="box" style="word-break: break-all;white-space: pre-wrap;">
hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</pre>

前端超出换行-white-space相关推荐

stm32中c语言换行符error——expect a declaration warning——“\“followed by white space is not a line splic
标题 stm32中c语言换行符error--expect a declaration warning--""followed by white space is not a lin ...
phpcms v9 sql数据{$r[content]}，前端如何换行显示？
已解决:phpcms sql数据{$r[content]},前端如何换行显示一.效果图 · 前后对比: 1. [解决前] 问题场景 · 如下图所示: 2. [解决后]效果截图: 2. 问题: 问1: ...
Visual Studio Tip 之如何查看隐形的空格(white space)和制表符(tab)
许多软件公司对于自己源代码的格式有这严格的规定, 比如说缩进的时候应该用多少个空格, 或多少个制表符都是不能有差错的. 然而, 三个空格和四个空格有很明显的区别么? 四个空格和一个制表符光靠肉眼容易分 ...
《Java SE实战指南》05-05：空白字符（White Space）
内容导航: 前言 1.定义 2.缩进 3.空格 4.空行 1.定义空白字符(White Space),包括ASCII空格符.水平制表符.换页符和行终止符,主要用来格式化代码. 2.缩进 4个空格,还 ...
线上问题处理-feign调用报错（Illegal character ((CTRL-CHAR, code 31)): only regular white space (\r, \n, \t) ）
线上问题处理-feign调用报错业务场景:服务1通过Feign调用服务2,测试阶段一切正常,线上有数据丢失(为避免敏感本地简单复现了下).报错如下: 2021-12-04 13:47:47.774 ...
only regular white space (\r, \n, \t) is allowed between tokens
Caused by: com.fasterxml.jackson.core.JsonParseException: Illegal character ((CTRL-CHAR, code 31)): ...
php 前端超出字数,标题字数超出范围截断处理方案比较
美好且让人蛋疼的一天开始了-- 生活中处处充满了意外:迈着欢快的步伐突然踩到了狗shit.洗衣服时发现自己不知何时放进口袋的毛爷爷.在女神面前欢快的聊天的时候没憋住放了一个屁等等.有些意外让人惊喜,有 ...
html5 white space,CSS white-space 属性
CSS样式常用属性整理 web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点 ...
ubuntu 输入空白How to cd to folder name with spaces blank names (white space)
it's must to use \ because it has space bar between file name like this $cd FONT\ 001 You just use a ...

前端超出换行-white-space

这里写目录标题