从头学前端-35：溢出处理

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第三十五篇-《溢出处理》

本篇文章介绍CSS中内容溢出的处理，主要包括对块溢出和文字溢出两种溢出的处理。

写在前面

所谓的溢出就是当元素里的内容（包括文本内容、图片、视频等内容）的大小超出盒子的大小区域时，内容区域会有一部分显示在盒子所在区域的外部，这就是内容给溢出。

这里讲解的溢出处理主要包含两种，第一种是对块溢出的处理，第二种是对文字溢出的处理。

块溢出

CSS中对块溢出处理的属性是overflow属性，该属性是overflow-x和overflow-y属性的简写。该属性常用的值有如下4个：

值	描述
`visible`	默认值。内容不会被修剪，超出部分会溢出到元素容器外面。
`hidden`	内容会被修剪，并且其余内容是不可见的。
`scroll`	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
`auto`	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

这里需要注意是overflow的值为scroll时，滚动条是始终显示的。

示例代码如下所示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>overflow属性</title><style>body {margin: 0;display: flex;}.overflow {width: 300px;height: 400px;background-color: lightskyblue;margin-left: 30px;margin-top: 30px;}.box {width: 240px;height: 500px;background-color: lightcoral;}.visible {overflow: visible;}.hidden {overflow: hidden;}.scroll {overflow: scroll;}.auto {overflow: auto;}code {display: block;text-align: center;font-size: 18px;}</style>
</head><body><div class="overflow visible"><code>overflow: visible;</code><div class="box"></div></div><div class="overflow hidden"><code>overflow: hidden;</code><div class="box"></div></div><div class="overflow scroll"><code>overflow: scroll;</code><div class="box"></div></div><div class="overflow auto"><code>overflow: auto;</code><div class="box"></div></div>
</body></html>

运行结果如下所示：

文字溢出

单行文字溢出

CSS中提供的text-overflow属性用来设置当文本内容溢出时，要如何进行处理，该属性有三个值，如下表所示：

值	描述
`clip`	修剪文本。
`ellipsis`	显示省略符号来代表被修剪的文本。
`<string>`	使用给定的字符串来代表被修剪的文本。

这里需要注意的是text-overflow属性必须配合overflow属性来使用，而且overflow属性为非visible，否则text-overflow属性将无效。

示例代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>单行文本溢出</title><style>div {width: 80px;border: 1px solid #4e4e4e;/* 强制文本内容一行输出 */white-space: nowrap;/* overflow属性来处理内容溢出的情况 */overflow: hidden;/* text-overflow属性必须配合overflow属性来使用- text-overflow属性具体处理文本显示的情况*/text-overflow: ellipsis;}</style>
</head><body><div>这是一个很长很长的内容</div>
</body></html>

代码运行结果如下所示：

页面缩放至500%

多行文字溢出

CSS中对多行文字的溢出其实就是一个固定写法，可以将其封装为一个公共的class，在使用的时候直接引用这个className就好。

核心代码如下：

div{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

详细代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><title>多行文字溢出处理</title><style>div {height: 60px;width: 400px;margin: 0 auto;border: 0.5px solid black;line-height: 20px;overflow: hidden;text-overflow: ellipsis;/* display属性值为带前缀的值: 不同浏览器提供的显示效果* -webkit-box: Chrome\Edge\Safari浏览器提供*/display: -webkit-box;/* -webkit-line-clamp属性:* 注意: 该属性是Webkit内核的私有属性(其他浏览器可能提供不同的属性)* 作用: 设置文本内容显示的行数*/-webkit-line-clamp: 3;/* -webkit-box-orient属性:* 作用: 在父元素设置,子元素的排列方式* 值:* vertical: 表示垂直* horizontal: 表示水平*/-webkit-box-orient: vertical;}</style>
</head><body><div>所谓的溢出就是当元素里的内容（包括文本内容、图片、视频等内容）的大小超出盒子的大小区域时，内容区域会有一部分显示在盒子所在区域的外部，这就是内容给溢出。这里讲解的溢出处理主要包含两种，第一种是对块溢出的处理，第二种是对文字溢出的处理。</div>
</body></html>

代码运行结果如下：

{完}

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏 - 掘金 (juejin.cn)进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐

关于v-model语法糖的知识点，这次应该说全了