overflow（溢出）4个属性值，水平/垂直溢出，文字超出显示省略号的详解

最新推荐文章于 2025-04-01 18:36:18 发布

云桃桃前端

最新推荐文章于 2025-04-01 18:36:18 发布

阅读量8.5k

点赞数 27

分类专栏： CSS 基础文章标签： css html5 前端 css3

本文链接：https://blog.youkuaiyun.com/u013179804/article/details/138048345

版权

本文阐述了如何利用CSSoverflow属性处理元素内容溢出，包括四种模式：visible、hidden、scroll和auto，并举例说明了在文本省略、图片管理和轮播图中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 WEB 前端的程序媛。

云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合集

279篇原创内容-更多前端系列内容可以go公众.h：云桃桃

后台回复“前端工具”可获取开发工具，持续更新中

后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

后台回复“前端电子书”可获取20+本精选电子书

前言

CSS 的 overflow 属性用于控制元素内容溢出时的表现方式。当元素的内容超出其指定的尺寸范围时，就会出现溢出现象。比如，一个元素的高度设置是 80px，但内容高度不只是 80px，内容此时就叫做溢出了。

而 overflow 属性则可以决定如何处理这种溢出情况，能让溢出部分，达到如下效果，。右侧出现了滚动条，可以查看所有内容了。

那需要注意的是，overflow 属性生效的前提是需要设置元素的宽度和高度。如果没有明确设置宽度和高度，浏览器将会自动根据内容进行调整，此时 overflow 属性可能不会产生预期的效果。

ok，那我们一起来看看吧。

1、visible：默认值，溢出内容会显示在元素框外，不会被剪切或隐藏。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="w