在
HTML中，`overflow
: hidden` 是一个CSS属性，用于控制元素内容溢出时的显示方式。当元素内容超出其指定的宽度和高度时，设置 `overflow
: hidden` 可以使溢出的内容被修剪，并且这些溢出的内容将无法被看到[^2]。
以下是一个简单示例：
```
html
<!DOCTYPE
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<title>overflow
: hidden示例</title>
<style>
div {
width
: 200px;
height
: 50px;
background-color
: #eee;
border
: 1px dotted black;
overflow
: hidden;
}
</style>
</head>
<body>
<div>
<p>这里的文本内容会溢出元素框</p>
<p>这里的文本内容会溢出元素框</p>
<p>这里的文本内容会溢出元素框</p>
</div>
</body>
</
html>
```
在上述示例中，`div` 元素的宽度和高度是固定的，当内部的 `p` 标签文本内容超出 `div` 的尺寸时，由于设置了 `overflow
: hidden`，溢出的部分将不会显示[^2]。
在移动端，若直接设置 `overflow
: hidden` 无效，可在需要隐藏滚动的内容上包裹一层 `div`，并给这个 `div` 设置 `overflow
: hidden`。示例代码如下：
```
html
<body>
<div class="hidDiv">
<section class="wrap">隐藏滚动的内容</section>
</div>
</body>
<style>
html {
width
: 100%;
height
: 100%;
}
.hidDiv {
width
: 100%;
height
: 100%;
overflow
: hidden!important;
}
</style>
```
该示例展示了在移动端隐藏滚动内容的方法，通过包裹 `div` 并设置 `overflow
: hidden` 解决了移动端直接设置无效的问题[^1]。
此外，在一些场景中，`overflow
: hidden` 还可用于清除浮动。例如，当 `ul` 元素中的 `li` 元素设置了浮动，`ul` 元素本身高度会塌陷，设置 `overflow
: hidden` 可以让 `ul` 元素包含浮动的 `li` 元素，避免高度塌陷：
```
html
<!doctype
html>
<
html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul {
background-color
: red;
overflow
: hidden;
}
li {
height
: 60px;
width
: 100px;
background-color
: gold;
float
: left;
position
: relative;
}
.tag {
background-color
: blue;
width
: 40px;
height
: 40px;
position
: absolute;
right
: 0;
top
: -20px;
}
</style>
</head>
<body>
<ul>
<li>01</li>
<li>02 <div class="tag">新品</div></li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
</ul>
</body>
</
html>
```
此示例中，`ul` 设置 `overflow
: hidden` 后可以正常包裹浮动的 `li` 元素，显示出红色背景，避免了因浮动导致的高度塌陷问题[^5]。
Struts框架中值传递技巧
本文详细介绍了在Struts框架下如何从JSP页面向Action传递值的两种常见方式。一种是通过FormBean字段进行传递，另一种则是利用request对象进行非FormBean字段的传递。
扫一扫
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
