`
frank1998819
  • 浏览: 770063 次
  • 性别: Icon_minigender_1
  • 来自: 南京
文章分类
社区版块
存档分类

CSS overflow : visible | auto | hidden | scroll 区别

阅读更多
overflow : visible | auto | hidden | scroll

参数:

visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

说明:

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视direction属性设置而定)的单元格。
自IE5开始,此属性在MAC平台上可用。
对应的脚本特性为overflow。请参阅我编写的其他书目。

示例:

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; white-space:nowrap;}


语法:

text-overflow : clip | ellipsis

参数:

clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)

说明:

设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
对应的脚本特性为textOverflow。请参阅我编写的其他书目。

示例:

div { text-overflow : clip; white-space:nowrap;}
分享到:
评论

相关推荐

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    版本:CSS2 兼容性:IE4+ NS6+ 继承性:无语法:overflow : visible | auto | hidden | scroll 相关参数说明如下: visible::不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window...

    全面阐述overflowhidden属性

    它有四个主要的取值:`visible`、`auto`、`hidden` 和 `scroll`。在这四个选项中,`hidden` 是本文讨论的重点。 - **`overflow: hidden;`**:此属性值会裁剪溢出的内容,并且不会提供任何滚动条来查看被裁剪掉的...

    overflow: hidden; 如何隐藏上面部分

    它有四个可能的值:`visible`、`hidden`、`scroll`和`auto`。默认情况下,大多数浏览器将此属性设置为`visible`,这意味着如果内容溢出容器,它将被剪切并且可以看到溢出的内容。 - **`overflow: visible;`**:溢出...

    css中position:relative和overflow:hidden之间的问题

    `overflow`属性则用于处理内容溢出其容器时的显示方式,它可以设置为`visible`(默认值,允许内容溢出)、`hidden`(隐藏溢出内容)、`scroll`(添加滚动条以查看溢出内容)或`auto`(根据需要添加滚动条)。...

    IE8 css overflow:hidden不起作用

    `overflow`属性包括几个可能的值,如`visible`(默认值,溢出内容可见)、`hidden`(溢出内容被裁剪隐藏)、`scroll`(溢出内容被裁剪,但提供滚动条)、以及`auto`(取决于浏览器,通常表现为`scroll`或`hidden`)...

    css使用overflow属性控制滚动条的样式

    滚动条样式主要涉及到如下overflow属性: ...以上三个属性设置的值为visible、scroll、hidden、auto visible 默认值。使用该值时,无论设置的width和height的值是多少,其中的内容无论是否超出范围都将被

    使用overflow: hidden来禁用页面滚动条

    在这个主题中,我们将详细介绍如何使用CSS属性`overflow: hidden`来禁用页面滚动条。这个属性是一种简单而又快速的方法来实现滚动条的禁用,而且它也能够兼容较老的浏览器,如IE6和IE7。 `overflow`属性是CSS中的一...

    css之使table也能overflow:hidden

    其常见值包括visible(默认值,溢出内容会显示在元素框之外)、hidden(溢出的内容会被裁剪,并且不可见)、scroll(溢出内容会导致出现滚动条,无论是否真的需要滚动)、auto(溢出内容会导致滚动条,但只在需要时...

    css实现div自动添加滚动条(图片或文字等超出时显示)

    语法: overflow : visible | auto | hidden | scroll ; 参数: 1.visible :不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 2.auto :此为b

    CSS-day06 (2).pptx

    overflow 属性有四个主要值:visible、hidden、scroll 和 auto。 * overflow: visible; 不剪切内容也不添加滚动条。 * overflow: hidden; 不显示超过对象尺寸的内容,超出的部分隐藏掉。 * overflow: scroll; 不管...

    CSS控制html文本溢出

    CSS提供了多种方法来实现这一目标,其中一种常用的技术是通过`text-overflow`、`overflow`以及`white-space`等属性的组合来实现文本溢出时的截断与省略号显示效果。 #### 二、关键概念与属性介绍 ##### 1. `text-...

    overflow属性的使用小例子

    1. 创建可滚动区域:如果你希望用户能够查看超出可视区域的内容,可以通过设置`overflow: auto`或`overflow: scroll`,添加滚动条来实现。 2. 隐藏溢出内容:在某些设计中,可能需要隐藏超出元素边界的元素,此时...

    CSS教程:导致一些问题的overflow

    `overflow`属性有多个值,如`visible`、`hidden`、`auto`和`scroll`,它们分别对应不同的处理方式。然而,虽然`overflow`在大多数情况下能够很好地工作,但在某些特定情况下,其使用可能会导致一些问题,尤其是在...

    CSS3样式表- 框模型之补充.pptx

    但要注意,使用 `text-overflow` 前,必须先将元素的 `overflow` 设置为 `hidden` 或 `scroll`,否则 `text-overflow` 不会有任何效果。 总结来说,CSS3的框模型补充部分——轮廓和溢出,提供了更丰富的控制元素...

    浅谈css溢出机制探究

    `overflow` 属性可以设置为 `visible`、`hidden`、`scroll` 或 `auto`,用来决定内容如何处理溢出部分。 1. `visible`(默认值):内容会溢出元素边界,没有任何限制。 2. `hidden`:溢出的内容会被隐藏,不会显示...

    css样式大全精华版.docx

    ### CSS样式大全精华版知识点概览 #### 一、字体属性 (Font Properties) **1. 大小** (`font-size`) - `x-large`:特大 - `xx-small`:极小(中文环境下较少使用,推荐使用具体数值如`16px`) - **单位**:`px`,...

    CSS3的resize属性使用初探

    语法:resize:none | both | horizontal | ...如果希望此属性生效,需要设置对象的overflow属性,值可以是auto,hidden或scroll。对应的脚本特性为resize。 为了增强用户体验,CSS 3增加了很多新的属性,其中一个重要

    让滚动条消失

    它可以取值为 `visible`、`hidden`、`scroll` 或 `auto`。 - `visible`: 内容超出容器后会直接显示在容器之外。 - `hidden`: 超出的内容会被裁剪,不会显示出来。 - `scroll`: 始终显示滚动条,无论内容是否超出...

Global site tag (gtag.js) - Google Analytics