CSS|Overflow

最新推荐文章于 2024-08-10 12:02:24 发布

Alan_Lowe

最新推荐文章于 2024-08-10 12:02:24 发布

阅读量90

点赞数 2

分类专栏： # CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_45985728/article/details/119549737

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|Overflow

1.内容溢出

我们在一个块元素内放置很多内容的话，这个块元素可能会容纳不了这些内容，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Overflow</title>
  <style>
    div{
      width: 300px;
      height: 100px;
      border: 10px solid red;
    }
  </style>
</head>
<body>

<div>
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
</div>

</body>
</html>

效果：

在这里插入图片描述

可以看到这些内容已经超出了这个块元素的范围。

2.Overflow

上述问题可以用Overflow来解决，它的值可以如下：

visible 默认值，内容不会被修剪，会呈现在元素框之外（上述图片）
hidden 内容会被修剪，并且多余的内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Overflow</title>
  <style>
    div{
      width: 300px;
      height: 100px;
      border: 10px solid red;
      /*
      visible 默认值，内容不会被修剪，会呈现在元素框之外（上述图片）
      hidden 内容会被修剪，并且多余的内容是不可见的
      scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
      auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
      inherit 规定应该从父元素继承 overflow 属性的值
      */
      overflow: scroll;
    }
  </style>
</head>
<body>

<div>
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
  这是一段文字这是一段文字这是一段文字这是一段文字
</div>

</body>
</html>