CSS中的单行、多行文本溢出总结

文章目录一.用到的相关属性1.white-space2.word-break3.text-overflow:4.`overflow`二.单行文本溢出三.多行文本溢出一.用到的相关属性1.white-space这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。①whit

程序媛小y

8864人浏览 · 2022-01-15 20:59:13

程序媛小y · 2022-01-15 20:59:13 发布

文章目录

- 写在前面

写在前面

这里是小飞侠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	√	×(合并)	√	√

注：

&nbsp：

在 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;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。