文章目录
- 写在前面
- 一.用到的相关属性
- 1.white-space
- 2.word-break
- 3.text-overflow:
- 4.`overflow`
- 二.单行文本溢出
- 三.多行文本溢出
写在前面
这里是小飞侠Pan🥳，立志成为一名优秀的前端程序媛！！！
本篇博客收录于我的github前端笔记仓库中，持续更新中，欢迎star~
👉https://github.com/mengqiuleo/myNote
一.用到的相关属性
1.white-space
这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。
①white-space: nowrap:
不仅空格被合并，换行符无效，连原本的自动换行也没有了！只有<br>才能导致换行！所以可以理解为永不换行。
元素内文本如果有多个空格在一起或换行符，浏览器只会显示一个空格；元素文本内容不会自动换行，只有遇到标签才会换行；
②white-space:pre：
空格和换行符被保留，但不会有自动换行。pre其实是preserve的缩写。
保留空白或换行符（回车键）。输入几个空格，浏览器显示的时候就是几个空格，其实就是原样输出，如果有换行符，换行符后的内容会从下一行开始。
③white-space:pre-wrap：
显然pre-wrap就是preserve+wrap，保留空格和换行符，且可以自动换行。
④white-space:pre-line：
空格被合并了，但是换行符可以发挥作用，line应该是new line的意思，如果有换行符（回车键），换行符后的内容会从下一行开始，不会影响自动换行。所以pre-line其实是preserve``new line+wrap。
总结：
- normal：忽略多余的空白，只保留一个空白(默认)；不会影响自动换行（就是元素内容过长，在一行上显示不完，会从下一行开始）；
- pre：保留空白(行为方式类似于html中的pre标签)；
- nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
- pre-wrap：保留空白符序列，正常地进行换行；
- pre-line：合并空白符序列，保留换行符；
- inherit：从父元素继承white-space属性的值。
| 是否能发挥作用 | 换行符 | 空格 | 自动换行 | 、nbsp; |
|---|---|---|---|---|
| normal | × | ×(合并) | √ | √ |
| nowrap | × | ×(合并) | × | √ |
| pre | √ | √ | × | √ |
| pre-wrap | √ | √ | √ | √ |
| pre-line | √ | ×(合并) | √ | √ |
注：
 ：
在 html 里是空格占位符，普通的空格在 html 里如果连续的多个可能被认为只有一个，而这个东西你写几个就能占几个空格位。
2.word-break
这个属性是控制单词如何被拆分换行的。它有三个值：normal | break-all | keep-all。
①word-break:keep-all：
所有“单词”一律不拆分换行，注意，这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行
②word-break:break-all：
所有单词碰到边界一律拆分换行，不管是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。
③word-wrap（overflow-wrap）：
word-wrap又叫做overflow-wrap：这个属性也是控制单词如何被拆分换行的，实际上是作为word-break的互补，它只有两个值：normal | break-word。
只有当一个单词一整行都显示不下时，才会拆分换行该单词。
3.text-overflow:
text-overflow: clip | ellipsis,
默认值:clip;
适用于:所有元素
clip:当前对象内文本溢出时不显示省略标记(…),而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(…)。
但需要与overflow:hidden; white-space:overflow;配合使用才能有效果。
4.overflow
overflow属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个常用的值：
visible: 默认值。内容不会回修剪，可以呈现在元素框之外。hidden: 如果内容超出父级容器，超出部分将会被隐藏scroll: 无论是否超出容器，都会出现一个滚动条。auto: 如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。
使用 overflow 的前提
为使 overflow 有效果，容器必须满足以下条件：
dispaly的值非inline。- 具有尺寸限制。(
width/height/max-width/max-height/absolute拉伸 ) - 对于单元格
td等,还需要table为table-layout: fixed才可以。
滚动条出现的条件
滚动条出现条件主要分为以下两种：
- 使用
overflow属性出现的滚动条 - HTML 元素自带的，例如
<html>和<textarea>属性。
默认滚动条是来自于 <html> 元素而不是 <body> 元素。滚动条也会占用用容器的可用宽度或者高度。
二.单行文本溢出
对于单行文本，使用单行省略：
{width: 200px;/*display: inline-block; (有时候需要加)*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
举例：
display: inline-block; 需要加的时候。
当需要将文本整块省略时，当直接使用平常的方案。
.person-card__desc {width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
结果如下：
将 display: inline 改为 display: inline-block 实现整块省略
如果需要实现一整块的省略，只需要将包裹整块标签元素的 span 的 display 由 inline 改为 inline-block 即可。
.person-card__desc span {display: inline-block;
}
三.多行文本溢出
{width: 200px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
}
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
- text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
