css怎么设置溢出隐藏-前端问答-PHP中文网

css怎么设置溢出隐藏

藏色散人

发布： 2021-04-02 10:50:07

原创

5751人浏览过

css设置溢出隐藏的方法：首先创建一个HTML示例文件；然后在body中定义一些p标签内容；最后通过“overflow:hidden”属性来设置溢出隐藏即可。

css怎么设置溢出隐藏

本文操作环境：Windows7系统、HTML5&&CSS3版，DELL G3电脑

在CSS中，可以利用overflow属性，使用overflow:hidden来设置溢出隐藏。

overflow属性

overflow属性规定当内容溢出元素框时发生的事情。

立即学习“前端免费学习笔记（深入）”；

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

说明：所有主流浏览器都支持 overflow 属性。

可能的值

visible：默认值。内容不会被修剪，会呈现在元素框之外。

设计师AI工具箱

最懂设计师的效率提升平台，实现高效设计出图和智能改图，室内设计，毛坯渲染，旧房改造，软装设计

124

查看详情

hidden：内容会被修剪，并且其余内容是不可见的。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
background-color: pink;
width: 150px;
height: 150px;
overflow: hidden
}
</style>
</head>
<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
默认值是 visible。
</div>
</body>
</html>

登录后复制

效果图：