溢出内容

简介

1 .目前知道的溢出就是滚动，文字溢出加..的css属性

2 .溢出的定义:css中万物都是盒子，当我们给定了width,height,inline-size,block-size赋值的方式来约束盒子的尺寸。溢出是你往盒子里面塞太多东西的时候发生的.

3 .默认处理的原则:尽量减少”数据损失“

1 .当数据超出盒子的时候，css不是把多余的内容隐藏起来，也不是让盒子变大
2 .只要有可能就会隐藏你的内容，隐藏引起的数据损失比显示起来杂乱更不能接受，最坏的结果就是用户看起来网站有些内容冒了出来，需要重新修理

overflow

1 .visible:默认属性，不隐藏，溢出的元素也会显示
2 .hidden:内容溢出的时候裁剪掉,隐藏掉溢出.
3 .scroll:内容溢出的时候添加滚动条。注意:这样的时候没有足够溢出的内容，也会显示滚动条
4 .auto:只是想让滚动条在比盒子所能装下更多内容的时候才显示。

1 .当你使用scroll或者auto的时候，你就创建了一个块级排版上下文
2 .在容器外的东西没法混进容器内，也没有东西可以突出盒子，进入周围的版面。
3 .激活了滚动动作，盒子里面的所有内容会被收纳，而且不会遮到页面上的其他的物件，于是就产生了一个协调的滚动体验

文字相关

1 .word-break:规定了非CJK脚本怎样在单词内断行，也就是非中日韩脚本的文字的

1 .break-all:允许在单词内换行
2 .keep-all:只能在半角空格或者连字符处换行。不应该是空格了就能换行么？？？CJK文字不断行.其实空格默认的就是换行点，不用任意的属性就能实现
3 .break-word:

2 .overflow-wrap:指定浏览器在任意目标元素内中断文本行，属性原来是word-warap:现在改名为这个。当一个不能被分开的字符串太长而不能填充包围盒时，为防止溢出，没浏览器允许这样的单词中断换行

image.png image.png

1 .break-word:单词会分成几部分。表示如果行内没有多余的地方容纳该单词到结尾，则那些正常的不能被分割的单词会被强制分割换行。
2 .inderit
3 .initial
4 .和word-break相比，overflow-wrap进在无法将整个单词放在自己的行而不会溢出的情况下才会产生中断

4 .word-wrap:

1 .break-word:  在长单词或 URL 地址内部进行换行
2 .normal:只在允许的断字点换行（浏览器保持默认处理

5 .word-spacing:指定字段之间的空间。也就是间隙。
6 .whiet-space:字符是否换行显示

1 .nowrap:空格不换行。在web的默认排版中，空格是换行点.所以空格不换行，自然就是一行显示了

7 .目前只能是全都用，看哪个生效用哪个吧.

空格相关的tips

1 .自动合并空格的特征，连续敲打的空格默认会按照一个空格渲染

1 .white-space:pre:空格不合并，同时不会换行显示
2 .white-space:pre-wrap:空格不合并，宽度不足的时候可以换行显示

2 .换行的本质就是在换行位置插入换行符，在web中，换行符被解析为空格.