关于javascript中的span
创建了一个span,里面加了一个table,span比较小,table比较大,要让
span出滚动条,但是span自动将边变大，可作出以下方法解决
<span style="width:300;height:200;overflow:auto">
.........
</span>
语法：
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。
如果不对你的span做控制,作为你的table的父级容器会跟随你的子容器的宽,高而变形.所以你的span变大了.要想达到不变型的效果有两种方法.
1,用ifream内嵌一个页面,把你的table放在你内嵌的页面里面.
2,设置你的span的CSS属性overflow:scroll;
例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www .w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http ://www.w3.org/1999/xhtml " >
<head>
<title>Test Span</title>
<style type="text/css">
span {
background-color:#ffcc00;
display:-moz-inline-box;
display:inline-block;
width:650px ;
height:250px;
overflow:auto;
}
</style>
</head >
<body>
fixed<br>
<span >关于javascript中的span
创建了一个span,里面加了一个table,span比较小,table比较大,要让
span出滚动条,但是span自动将边变大，可作出以下方法解决
<span style="width:300;height:200;overflow:auto">
.........
</span>
语法：
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。
如果不对你的span做控制,作为你的table的父级容器会跟随你的子容器的宽,高而变形.所以你的span变大了.要想达到不变型的效果有两种方法.
1,用ifream内嵌一个页面,把你的table放在你内嵌的页面里面.
2,设置你的span的CSS属性overflow:scroll; </span>
<br> span
</body>
</html>
分享到：
相关推荐
曾经有朋友问：为什么给用css给span定义高度和宽度后，它的宽度和高度仍然没有变化，好像失效了一样？ 其实这个问题很简单——先要认清span的属性，因为span属于内联元素，而内联元素是忽略宽度和高度的，明白了这...
方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用...
曾经有朋友问：为什么给用css给span定义高度和宽度后，它的宽度和高度仍然没有变化，好像失效了一样？ 其实这个问题很简单——先要认清span的属性，因为span属于内联元素，而内联元素是忽略宽度和高度的，明白了这...
1.2.2 在HTML中引入CSS的方法 1.3 基本CSS选择器 1.3.1 标记选择器 1.3.2 类别选择器 1.3.3 ID选择器 1.4 复合选择器 1.4.1 “交集”选择器 1.4.2 “并集”选择器 1.4.3...
设置高度.html 设置高度属性 设置层居中.html 设置层居中实例。 尺寸实例手把手.html 演示尺寸实例手把手。 第20章（源代码\第20章） 示例描述：本章演示外补丁用法。 margin基本语法.html ...
css盒模型：块级元素，内联元素，内敛块状元素，none使元素隐身，设置宽度、高度、背景色、边框、圆角，padding内边距，margin外边距； css布局模型：流动模型flow，浮动模型float，层模型layer，层模型的绝对定位、...
1.1 HTML与XHTML 1.1.1 追根溯源 1.1.2 DOCTYPE（文档类型）的含义与选择 1.1.3 XHTML与HTML的重要区别 1.2 （X）HTML与CSS 1.2.1 CSS标准简介 1.2.2 在HTML中引入CSS的方法 1.3 基本CSS选择器 ...
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度) 说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的 CSSHack技术就可以啊！所以在...
《CSS设计彻底研究》详细介绍了CSS核心基础、盒子模型等知识，力求把道理和方法讲清楚，采用了“探索式”的讲解方法，对于一个问题，例如标准流、浮动、定位等规律，均通过一系列动手实验，使读者自己就能够非常自然...
1框模型（盒子模型）border(边框)margin (外边距)padding(内边距)content(内容)在CSS中，width 和 height指的是内容区域的宽度和高度1框模型（盒子模型）border、padding、margin都是可选的...
9.2.4 div和span的区别 199 9.3 div+CSS布局介绍 200 9.3.1 div+CSS布局的优点 200 9.3.2 div+CSS布局的缺点 201 9.3.3 何时使用TABLE 202 9.4 一列布局 203 9.4.1 一列固定宽度 203 9.4.2 一列宽度自适应 204 9.4.3...
7.1.2 常用CSS hack使用方法 7.1.3 CSS hack管理 7.2 IE条件注释功能 7.3 盒模型问题 7.3.1 盒模型hack 7.3.2 简单盒模型hack方法 7.4 IE捉迷藏 7.5 ul的不同表现 7.6 IE 3px问题 7.7 高度不适应 7.8 IE6断头台问题 ...
可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时，页面将会在相应的内联框架中打开 内联框架中的内容不会被搜索...
用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性） 然后用处理图片垂直居中的方式处理文字的垂直居中即可。 使用方法： 1、将head中的样式复制到你的样式表中...
用到CSS样式和HTML标签元素 为了对html不同标签加边框虚线，我们选择几个常用标签对齐设置边框虚线效果。...我们对以上几个标签设置相同宽度、相同高度、边框效果。 5、完整HTML代码： <!DOCTYPE h
span,a,i,u,b,s 3.溢出处理 当内容多，元素区域小的时候，会产生溢出的效果，默认都是纵向溢出 属性：overflow,overflow-x,overflow-y 取值： 1.visible 可见的，默认值，溢出可见 2.hidden 隐藏的，溢出的...
在使用这些标签的时候，我们会发现有些标签可以设置宽度和高度属性（如p标签），有些标签则不可以（如strong标签）。这是因为标签有着特定的类型，不同类型的标签可以设置的属性也不同。 本节将详细讲解标签元素的...
方法一：用CSS截断字符串：IE,FireFox，Opera ，Safari都兼容 .subLongText{ width:150px; height:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-overflow: ellipsis;/* IE/Safari */ ...