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>鱼C-零基础入门学习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 |