css的white-space属性：normal，nowrap，pre，pre-line和pre-wrap的区别？

首先一定要搞清楚什么是换行符！！！这里说的换行符指的既不是<br />标签，也不是\n，就是咱们自己手指敲了一下键盘上的“enter"键，就这么简单！！！

换行的含义：就是盒子宽度不够了，内容自动被换到下一行了。

下面结合代码图说明：

首先，我建造了一个背景颜色为绿色的div盒子，div盒子内容如下所示，这里为了展示换行的效果，每一行末尾添加数字表示行；

然后分别叠加对应的属性，去查看效果。

1. normal：自动换行，合并所有空格为1个空格，将换行符（“enter”）也转换成一个空格。

2. nowrap：不许自动换行，合并所有空格为1个空格，将换行符（“enter”）也转换成一个空格。

3. pre：不许自动换行，保留原来所有空格，换行符（“enter”）换行功能起作用。====>(一句话：原有文本是什么样子，就显示什么样子）

4. pre-line：自动换行，合并所有空格为1个空格，换行符（“enter”）换行功能起作用。

5. pre-wrap：自动换行，保留原来所有空格，换行符（“enter”）换行功能起作用。

综合发现：pre，pre-line和pre-wrap虽说换行符（“enter")都起作用了，但是pre-line每一行最前面的空格没有了，pre和pre-wrap前面的空格和文本内容是一样的。

white-space属性总结

属性值	是否允许自动换行	是否合并所有空格	换行符（“enter”
normal	允许	是	变成一个空格
nowrap	不允许	是	变成一个空格
pre	不允许	否	换行功能起作用
pre-line	允许	是	换行功能起作用
pre-wrap	允许	否	换行功能起作用

css的white-space属性：normal，nowrap，pre，pre-line和pre-wrap的区别？相关推荐

html5 white space,CSS white-space 属性
CSS样式常用属性整理 web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点 ...
css 控制文字换行相关属性
测试代码: 下面是本文中用于测试三个样式属性展现情况的html代码: <div id="box">Hi ,This is a incomprehensibilitie ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
html文字自动换行 ie,css 自动换行强制换行属性 (firefox+ie)
css 自动换行强制换行属性 (firefox+ie) 发布时间:2009-10-13 17:40:39 作者:佚名我要评论 css 自动换行强制换行属性,在实际应用中,如果不强制换行会 ...
css 有关边框的属性_边框样式（CSS属性）
css 有关边框的属性句法 (Syntax) border-style边框样式 : { { : {{ none | 无 | hidden | 隐藏 dotted | 点缀 | dashed | 虚线 ...
用css的animation动画属性来实现一个H5场景动态电子邀请函
接触css的animation 也有一段时间,经常在朋友圈会看到一些很漂亮的电子邀请函,刚开始以为是视频,后来发现原来是用css的animation来实现的.经过分析,其实是利用css的animati ...
双18期|CSS揭秘之简写属性
theme: channing-cyan highlight: a11y-dark 双18期|CSS揭秘之简写属性 tips:每个技术点都值得优学优写:18期一.写在前面 css 简写属性了解吗?前 ...
【网页制作】CSS文本和字体属性讲解【附讲解视频】
1.CSS文本和字体属性的作用:给文本和字体设置样式(具体看第二部分) 注意:在html中我们可以省略单位,但CSS中不可以省略单位. 简单的说大多数情况在html的body标签中我们可以省略单位,但 ...
【CSS 定位之 display 属性】
CSS 定位之 display 属性 1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局) ⑴ 设置元素的显示类型 ( 框的类型 ) ⑵ 元素的显示类型 ⑶ 显 ...
html scale属性,CSS中的zoom属性和scale属性的用法及区别
CSS中的zoom属性和scale属性的用法及区别 CSS中的zoom属性和scale属性的用法及区别是什么呢?以下是小编整理的相关内容,欢迎阅读学习! zoom 属性语法: zoom:normal ...

css的white-space属性：normal，nowrap，pre，pre-line和pre-wrap的区别？

css的white-space属性：normal，nowrap，pre，pre-line和pre-wrap的区别？相关推荐

最新文章

热门文章