小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
什么是内容溢出
所谓内容溢出，主要指当子级元素（包含文本、图片或元素等）的大小超出父级元素的大小区域时，子级元素会有一部分显示在父级元素所在区域的外部。
overflow 属性
CSS overflow 属性用来设置当子级元素溢出父级元素的区域时，要如何进行处理。
- visible：l默认值。内容不会被修剪，会显示在父级容器之外。
- hidden：内容会被修剪，并且其余内容不可见。
- scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容。
- auto：由浏览器决定，如果内容被修剪，就会显示滚动条。
visible 是 overflow 属性的默认值，也就是说，即使你不设置 overflow 属性的值，那 overflow 属性的值就是 visible。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内容溢出</title>
<style>
div {
height: 100px;
width: 300px;
border: 1px solid #000;
/* overflow属性设置内容溢出情况的处理方式
* visible: (默认值)表示显示
* hidden: 表示溢出部分全部隐藏
* scroll: 提供一个滚动条(不管内容是否溢出)
* auto: 由浏览器进行决定
* 如果内容没有溢出的情况, 不做任何处理
* 如果内容溢出的情况, 提供一个滚动条 */
overflow: auto;
}
.q2 {
width: 100px;
height: 50px;
border: 1px solid #000;
/* 强制文本内容一行输出 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="q1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, perspiciatis unde ducimus in ipsum labore reprehenderit, cum quam tempora numquam commodi architecto est nobis reiciendis esse possimus, id placeat. Inventore.
</div>
<div class="q2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti eius amet quod numquam, sequi eos praesentium aliquid, aperiam perspiciatis harum provident corrupti officia ipsam esse quia non ex! Laudantium, dolore!</div>
</body>
</html>
值得注意的是，当设置 overflow 属性的值为 scroll 时，无论子级元素是否溢出父级元素，浏览器都会显示滚动条。
当设置 overflow 属性的值为 auto 时，浏览器会根据具体的情况来判断是否显示滚动条，具体情况如下：
- 如果子级元素没有溢出父级元素的话，浏览器则不显示滚动条。
- 如果子级元素溢出父级元素的话，浏览器则显示滚动条。
值得注意的是，overflow-x 和 overflow-y 属性目前主流浏览器的支持情况并不是很好。
text-overflow 属性
CSS text-overflow 属性用来设置当文本内容溢出时，要如何进行处理。
- clip：将文本内容超出父级容器的部分隐藏。
- ellipsis：将文本内容超出父级容器的部分使用省略号（...）表示。
- string：将文本内容超出父级容器的部分使用指定文本内容表示，例如“.”等。
<style>
.q2 {
width: 100px;
height: 50px;
border: 1px solid #000;
/* 强制文本内容一行输出 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</stule>
- 除 overflow 属性外，CSS 还提供了 overflow-x 和 overflow-y 属性来处理内容溢出。
- 在使用 text-overflow 属性时，一定要同时设置 overflow 属性的值，否则 text-overflow 属性将无效。
