定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。
overflow属性值:
1.visible:默认值。内容不会被修剪,会呈现在元素框之外。
2.hidden:内容会被修剪,并且其余内容是不可见的。
3.scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
4.auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
5.inherit:规定应该从父元素继承 overflow 属性的值。
总结:overflow属性值中visible和hidden是对立的,scroll和auto是对立的。inherit是继承父元素的overflow属性值,默认是scroll.
场景:文本框是用来发表意见的,不显示滚动条而且当内容溢出给出的显示空间的时候,不能再输入文字了。
代码:
<table border=1 cellspacing=0 cellpadding=0>
<tr>
<td colspan="4" align="left" height="40px"
style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;">
<table border=0 cellspacing=0 cellpadding=0 width=100%>
<tr>
<td colspan=2>
审计单位意见:
</td>
</tr>
<tr>
<td colspan=2>
<textarea rows="8" cols="120" style="overflow: hidden"></textarea>
</td>
</tr>
<tr>
<td width="44%">
</td>
<td style="padding-left: 100px;">
<input type="text" size="8" maxsize="4" align="center"
style="border: none;">
年
<input type="text" size="4" maxsize="2" align="center"
style="border: none;">
月
<input type="text" size="4" maxsize="2" align="center"
style="border: none;">
日
</td>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td colspan="4" align="left" height="40px"
style="FONT-FAMILY: 宋体; FONT-SIZE: 12pt;">
<table border=0>
<tr>
<td>
发包人意见:
</td>
</tr>
<tr>
<td colspan=2>
<textarea rows="8" cols="120" style="overflow: hidden;"></textarea>
</td>
</tr>
<tr>
<td width="44%">
</td>
<td style="padding-left: 100px;">
<input type="text" size="8" maxsize="4" align="center"
style="border: none;">
年
<input type="text" size="4" maxsize="2" align="center"
style="border: none">
月
<input type="text" size="4" maxsize="2" align="center"
style="border: none">
日
</td>
</tr>
</table>
</td>
</tr>
</table>
2.设置浏览器窗口滚动条
没有水平滚动条 :<body style="overflow-x:hidden;">
没有垂直滚动条:<body style ="overflow-y:hidden;">
没有滚动条:<body style="overflow:hidden;">
3.设置文本区的滚动条和浏览器窗口滚动条一个道理。这里不再重复了。
分享到:
相关推荐
滚动条样式主要涉及到如下overflow属性: overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 overflow: auto; 在需要时内容会自动添加滚动条 overflow: ...
overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来; 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto; overflow:auto 属性如果超出就出现...
通过使用 CSS 的 overflow 属性,我们可以确保圣诞树在不同设备和屏幕尺寸上都能完美显示,而不会被裁剪或破坏。这不仅增强了用户的体验,也保持了页面的整洁和布局的完整性。此外,通过添加装饰和使用媒体查询,...
在本案例中,“overflow属性的使用小例子”将展示如何运用`overflow`属性来实现不同的视觉效果。 `overflow`属性主要有以下几个值: 1. `visible`:这是默认值,表示内容可以超出元素的边框,不会出现滚动条。 2. ...
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性,允许页面元素浮动在其他元素旁边。Float 属性可以取四个值:Left、Right、None 和 Inherit。其中,Left 和 Right 分别浮动元素到左边和右边,...
#### CSS Overflow 属性详解 `overflow`属性用于控制溢出内容的显示方式,常见的值有`visible`、`hidden`、`scroll`和`auto`。 #### CSS Position 详解 `position`属性定义元素的定位方式,包括`static`、`...
1. **盒模型属性**:包括`box-sizing`改变盒模型的行为,`outline`定义元素轮廓,以及`overflow`处理溢出内容。 2. **过渡和动画**:`transition`定义元素在不同状态间的平滑过渡,`animation`允许创建复杂的动画...
本篇将详细阐述CSS3中的关键知识点,包括动画属性、边框属性、背景属性以及其他的样式属性。 **CSS3动画属性**允许开发者创建复杂的动态效果。`@keyframes` 规定了一个动画的帧,定义了从一种样式到另一种样式的...
在CSS中,`text-overflow`属性是用来处理文本溢出情况的一个重要工具,尤其是当文本在有限的容器内无法完全显示时。这个属性通常与`overflow`和`white-space`属性一起使用,来实现文本的截断和省略。本文将深入探讨`...
CSS overflow-wrap 属性其实就是以前的 word-wrap 属性,MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。 由于 overflow-wrap 属性IE浏览器不支持,而其他现代浏览器依然支持老的 word-wrap...
1. CSS Overflow 属性:这是控制元素溢出内容的关键。`overflow`属性可以设置为`visible`(默认值,内容溢出元素边界)、`hidden`(隐藏溢出内容)、`scroll`(始终显示滚动条)或`auto`(仅在需要时显示滚动条)。...
CSS3 常用属性大全 CSS3 是 Cascading Style Sheets(层叠样式表)的第三个版本,是一种用于描述网页样式的语言。它对CSS2进行了扩展,添加了一些新的特性和功能。本文档总结了 CSS3 中的常用属性,涵盖了动画、...
1. **CSS Overflow属性**: CSS中的`overflow`属性是实现滚动功能的基础。它可以设置为`auto`或`scroll`,当内容超过容器的大小时,会自动添加滚动条。`overflow-x`和`overflow-y`则分别控制水平和垂直方向的滚动。...
CSS 属性查询以及用法 CSS 属性查询是指在 HTML 标记语言中使用的样式表语言 CSS 的各种属性的查询和使用方法。该查询包含了绝大多数常用的 HTML 标签,以及其对应的属性和用法。 字体属性(Font) * font-...
在网页设计与开发中,CSS(层叠样式表)作为控制HTML元素布局与样式的强大工具,其提供的诸多属性中,`overflow` 属性对于控制元素内内容的显示方式具有重要作用。其中,`overflow: hidden` 是一个非常实用且常见的...
CSS中关于溢出隐藏的知识点包含了多个方面,具体包括overflow属性的使用、其各个值的含义、以及如何优雅地处理内容溢出的情况。 首先,CSS中的overflow属性是用于控制元素溢出内容的显示方式。这个属性可以指定当...
下面我们将深入探讨在描述中提到的一些常用CSS属性。 字体属性: `font-size` 用于定义字体的大小,可以使用像素(PX)或其他相对单位如em、rem等。例如:`font-size: 16px;`。 `line-height` 设置行高,同样可以...