Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >css overflow-x属性怎么用
css overflow-x属性怎么用
- 青灯夜游asal
- 2019-05-29 14:22:502998semak imbas
overflow-x属性用于指定当元素溢出内容区域时，是否对内容的左/右边缘进行裁剪。overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。
css overflow-x属性怎么用？
overflow-x属性规定如果溢出元素内容区域的话，是否对内容的左/右边缘进行裁剪。
语法：
overflow-x: visible|hidden|scroll|auto|no-display|no-content;
属性值：
● visible：不裁剪内容，可能会显示在内容框之外。
● hidden：裁剪内容 - 不提供滚动机制。
● scroll：裁剪内容 - 提供滚动机制。
● auto：如果溢出框，则应该提供滚动机制。
● no-display：如果内容不适合内容框，则删除整个框。
● no-content：如果内容不适合内容框，则隐藏整个内容。
注释：使用overflow-y属性来判断顶部和底部边缘是否裁剪。overflow-x 属性无法在 IE8 以及更早的浏览器正确地工作。
css overflow-x属性 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:110px;
height:110px;
border:thin solid black;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body>
<div><p style="width:140px">
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
这是一个段落。这是一个段落。这是一个段落。这是一个段落。
</p></div>
<p>Overflow-x 是否对内容的左/右边缘进行裁剪。</p>
<p>Overflow-y 是否对内容的上/下边缘进行裁剪。</p>
</body>
</html>效果图：
Atas ialah kandungan terperinci css overflow-x属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css box-flex属性怎么用Artikel seterusnya：css box-flex-group属性怎么用