`

CSS overflow用法

阅读更多

语法:

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; }

语法:

text-overflow : clip | ellipsis

参数:

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

说明:

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

示例:

div { text-overflow : clip; }

分享到:
评论

相关推荐

    深入理解CSS overflow:hidden——溢出,坍塌,清除浮动

    overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌。当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章,我相信你绝对能对...

    postcss-overflow-shorthand:在 CSS 中使用溢出速记

    允许您按照规范在 CSS 中使用overflow速记。 html { overflow : hidden auto; } /* becomes */ html { overflow-x : hidden; overflow-y : auto; overflow : hidden auto; } 用法 将添加到您的项目中: npm ...

    CSS overflow-wrap新属性值anywhere 用法大全

    CSS overflow-wrap 属性其实就是以前的 word-wrap 属性,MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。 由于 overflow-wrap 属性IE浏览器不支持,而其他现代浏览器依然支持老的 word-wrap...

    css overflow: hidden 的用法(溢出隐藏及清除浮动)

    style type=text/css> div {background-color: yellow;width: 350px;height: 100px;overflow: hidden;} </style> </head> <body> 元素中的内容超出了给定的宽度和高度属性,overflow属性...

    零基础学HTML CSS源代码

    示例描述:本章演示DIV与CSS结合用法。 内联定义样式.html 内联定义样式.html 链入内部CSS样式.html 链入内部CSS样式.html 外链接.html 外链接.html 链接外部CSS样式.html 链接外部CSS样式....

    浅谈CSS中overflow清除浮动的用法

    overflow清除浮动以下面的XHTML代码为例: ...我以前用的方法是(CSS代码): CSS Code复制内容到剪贴板 #container{ width:1000px; overflow:hidden; background:#999999; } #left{ wi

    使用CSS的overflow属性防止float撑开div的方法

    我们在使用float设定浮动元素的时候经常会遇到撑破div的情况,其中一种解决方法即是利用overflow: hidden,这里我们就来看一下使用CSS的overflow属性防止float撑开div的方法:

    标签增加CSS的overflow属性来清除浮动

    这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。 方法真的很简单,只要为需要清浮动的标签加上overflow这个属性。 ul{ list-style:none; height:auto; margin:0;p ...

    Vue2 常用用法- flex + overflow:hidden

    css - flex + overflow:hidden

    CSS:用overflow代替left截取指定长度字符串

    为了防止文章标题过长超过容器(td,div)宽度而显示成多行,我们通常要对标题进行处理让其显示在一行,通常使用的方法有两种:一种方法是在客户端用CSS设置容器的overflow属性;另一种方法则是在服务器端用left函数对...

    postcss-momentum-scrolling:PostCSS插件添加“动量”样式的滚动行为(-webkit-overflow-scrolling

    PostCSS动量滚动 插件,用于为iOS上具有溢出(滚动,自动)的元素添加动量样式滚动行为( -... :cooking: 用法 检查你项目存在PostCSS配置: postcss.config.js在项目的根, "postcss"一节package.json或postcss捆绑配

    overflow:hidden line-height clearfix:after使用方法介绍

    1.overflow:hidden的作用是隐藏溢出比如: 复制代码代码如下: <div xss=removed id=1><div id=2></div><div> 当ID=2的这个DIV高度设定的宽度超过了300px,那么超出的部分将自动被隐藏 2.line-height指的是在DIV中...

    html、css最全知识点总结

    10、锚点的使用方法 11、精灵图的使用及其优点(所谓精灵图就是把网页中一些png的小图标放在一张图片上,使用背景定位属性去调整图片的位置,一般使用负值 目的:减轻服务器的压力,静态资源(图片)在加载的时候是...

    CSS3定位和浮动详解

    本文为大家分享CSS3定位和浮动的基础概念,与使用方法,供大家参考,具体内容如下 一、定位 1、 css定位: 改变元素在页面上的位置 2、 css定位机制: 普通流: 浮动: 绝对布局: 3、 css定位的属性: ...

    CSS省略号text-overflow超出溢出显示省略号

    DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程

Global site tag (gtag.js) - Google Analytics