Css white-space属性

white-space，英语词组意思为空余空间，在计算机术语中的意思是泛空格符。white-space 属性设置如何处理元素内的空白。

取值：
normal :默认值，文本自动处理换行。假如抵达容器边界内容会转到下一行。
pre :用等宽字体显示预先格式化的文本。换行和其他空白字符都将受到保护，即按照书写内容进行输出。
nowrap：强制在同一行内显示所有文本，只到文本结束或遭遇br对象。

实例介绍：
normal：

<p>世界这么    大
</p>

输出：

多个空格符，只会显示出一个

pre:

<p style="white-space: pre;">世界这么    大
</p>

输出：

多个空格符会全部显示。

nowrap:

  <p style="white-space: nowrap;width: 100px;overflow: scroll;">世界这么1111111111111111111111111111111111大</p>

输出:

所有的文字都被挤在一行中，对多余的内容进行滚轮处理

Css white-space属性相关推荐

html5 white space,CSS white-space 属性
CSS样式常用属性整理 web工程师是最近5年刚刚兴起的一门高薪职业,人们的专注度越来越高. 那么前端除了学习html标签之外还需要掌握什么知识点呢? 为大家整理了一个和HTML标签密不可分的知识要点 ...
css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别
在css中white-space属性用来控制容器的文本中带有空白符.制表符.换行符等的显示,取值有: normal:默认,忽略文本中所有的空白.换行符:只有文本存在 <br> 或文本达到框 ...
【拼爹坑爹不比爹】深入理解css中position属性及z-index属性
总结:拼爹坑爹不比爹 1,定位移动:距左上角left+top;(移动后对于移动前:如果值为负数,则直接换成整数:如果值为整数,则直接改变相对方向.) 2,单一父元素不设值,子z-index才奏效:&q ...
CSS的all(属性) 笔记
测试代码 <!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf- ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
三分钟快速了解CSS Display的属性：Block,Inline,Inline-Block
文章目录三分钟快速了解CSS Display的属性:Block,Inline,Inline-Block Block Inline Inline-block Block,Inline,Inline-B ...
CSS基础样式属性设置
文章目录 css基础样式与属性设置一.宽和高二.字体属性 1. font-family:文字字体 2.font-size:字体大小 3.font-weight:文字粗细 4.font-style: ...
巧用CSS的Border属性
. 作者:冯永曜来源:黄山村夫制作过网页的人都有为画线而烦恼的经历,本文介绍的小技巧也许对你有所帮助.我们先来认识一下"Border"(画边框),它是CSS的一个属性,用它可以 ...
CSS中background-position属性
CSS中background属性是经常用到的,可以给某个块设置背景色.以下主要说明以下background-position属性的应用. 一般在设置background属性时的写法是: backgro ...
CSS中连接属性的排序
在CSS超链接的属性中,有四个连接方式: a:link a:hover a:visited a:acticve 之前在使用的时候一直是按照自认为的顺序中去写的,就是 L H V A的排序方式,然而有 ...

Css white-space属性

Css white-space属性相关推荐

最新文章

热门文章