Web速查-索引

overflow-x

定义

overflow-x属性指定是否对溢出内容的元素进行剪辑左/右边缘。

语法

overflow-x: visible|hidden|scroll|auto|no-display|no-content;

属性值

值 说明
visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。
no-display 如果内容不适合内容框，则删除整个框。
no-content 如果内容不适合内容框，则隐藏整个内容。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>

    <style>

        div

        {

            width:111px;

            border:thin solid black;

            overflow-x:hidden;

        }

        div p{

            width: 222px;

        }

    </style>

</head>

<body>

   <p>Overflow-x指定是否要剪辑的左/右边缘的内容——hidden   裁剪内容 - 不提供滚动机制。</p>

   <div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam distinctio, earum ex excepturi, inventore ipsam non numquam, praesentium quaerat quidem quo quod ratione reprehenderit repudiandae veritatis! Ipsa laboriosam laudantium ut?</p></div>

</body>

</html>

Overflow-x指定是否要剪辑的左/右边缘的内容——hidden 裁剪内容 - 不提供滚动机制。

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam distinctio, earum ex excepturi, inventore ipsam non numquam, praesentium quaerat quidem quo quod ratione reprehenderit repudiandae veritatis! Ipsa laboriosam laudantium ut?

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari Chrome FireFox IE
3.0 4.0 3.5 9.0