css文本溢出

孙景荣

已于 2023-01-28 17:16:59 修改

阅读量1.9k

点赞数 1

分类专栏： CSS 文章标签： css 前端

于 2022-09-30 20:06:39 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127128529

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、文本溢出属性

文本溢出属性: 当一个盒子中的内容较多的时候，超出当前容器，就会用到文本溢出属性overflow

属性值：
1、visible 默认值，超出正常显示
2、hidden 超出隐藏
3、scroll 无论是否超出，都显示滚动
4、auto 超出显示滚动条不超出不显示滚动条

下面演示 overflow: auto 的效果：

<!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>Document</title>
    <style>
      div {
        width: 200px;
        height: 300px;
        border: 1px solid #000;
        margin: 10px auto;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <div>
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
      文本溢出属性文本溢出属性文本溢出属性文本溢出属性
    </div>
  </body>
</html>

在这里插入图片描述