css overflow-x overflow-y.html

最新推荐文章于 2025-06-09 18:20:52 发布

学无止境慢慢来

最新推荐文章于 2025-06-09 18:20:52 发布

阅读量263

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

原文链接：https://www.w3school.com.cn/cssref/pr_overflow-x.asp

CSS 专栏收录该内容

71 篇文章

订阅专栏

本文深入探讨了CSS中overflow-x和overflow-y属性的作用，详细解释了如何使用这些属性来控制内容溢出元素框时的显示方式，包括可见、隐藏、滚动和自动四种状态。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css overflow-x overflow-y</title>
    <style>
        /*参考：https://www.w3school.com.cn/cssref/pr_overflow-x.asp
        知识点：
        1.overflow-x 属性规定是否对内容的左/右边缘进行裁剪 - 如果溢出元素内容区域的话。
            overflow-x: visible|hidden|scroll|auto;
        2.overflow-y 属性规定是否对内容的上/下边缘进行裁剪 - 如果溢出元素内容区域的话。
            overflow-y: visible|hidden|scroll|auto;*/
        div {
            width: 110px;
            height: 110px;
            border: thin solid black;
            overflow-x: hidden;
            overflow-y: scroll;
            /*对内容进行预格式化，所见即所得。*/
            white-space: pre;
        }
    </style>
</head>
<body>
<div>
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
    这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</div>
<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>
</body>
</html>