码迷,mamicode.com
首页 > Web开发 > 详细

CSS overflow white-space CSS3 text-overflow 属性

时间:2014-09-03 10:51:06      阅读:468      评论:0      收藏:0      [点我收藏+]

标签:style   http   os   io   使用   java   ar   div   sp   

当div内内容超出大小时可用以下属性进行隐藏 同时用div的title属性进行提示 当鼠标放到上面时显示未被全部显示的内容

 

 

CSS 参考手册

实例

设置 overflow 属性:

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

亲自试一试

浏览器支持

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

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

定义和用法

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

说明

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

默认值: visible
继承性: no
版本: CSS2
JavaScript 语法: object.style.overflow="scroll"

可能的值

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

TIY 实例

如何使用滚动条来显示元素内溢出的内容
本例演示当元素内容太大而超出规定区域时,如何设置溢出属性来规定相应的动作。
如何隐藏溢出元素中溢出的内容
本例演示在元素中的内容太大以至于无法适应指定的区域时,如何设置 overflow 属性来隐藏其内容。
如何设置浏览器来自动地处理溢出
本例演示如何设置浏览器来自动地处理溢出。

相关页面

CSS 教程:CSS 定位

HTML DOM 参考手册:overflow 属性

 

 

CSS 参考手册

定义和用法

white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

默认值: normal
继承性: yes
版本: CSS1
JavaScript 语法: object.style.whiteSpace="pre"

实例

规定段落中的文本不进行换行:

p

  {

  white-space: nowrap

  }

TIY

浏览器支持

所有浏览器都支持 white-space 属性。

注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

可能的值

描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

TIY 实例

在元素中禁止文本折行
本例演示如何禁止在元素中的文本折行。

相关页面

CSS 教程:CSS 文本

HTML DOM 参考手册:whiteSpace 属性

CSS 参考手册

 

 

实例

使用 text-overflow 属性:

div.test
{
text-overflow:ellipsis;
}

亲自试一试

页面底部有更多实例。

浏览器支持

IEFirefoxChromeSafariOpera
         

所有主流浏览器都支持 text-overflow 属性。

定义和用法

text-overflow 属性规定当文本溢出包含元素时发生的事情。

默认值: clip
继承性: no
版本: CSS3
JavaScript 语法: object.style.textOverflow="ellipsis"

语法

text-overflow: clip|ellipsis|string;
描述测试
clip 修剪文本。 测试
ellipsis 显示省略符号来代表被修剪的文本。 测试
string 使用给定的字符串来代表被修剪的文本。  

亲自试一试 - 实例

带有 hover 效果的 Text-overflow
本例演示当光标浮动到元素上时如何显示全部文本。

相关页面

CSS3 教程:CSS3 文本效果

CSS overflow white-space CSS3 text-overflow 属性

标签:style   http   os   io   使用   java   ar   div   sp   

原文地址:http://www.cnblogs.com/plzdaye/p/3952923.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!