用CSS实现文字的自动隐藏 并且出现三点

原创 2007年09月17日 15:57:00
不可换行 <NOBR></NOBR> (不换行)
 
overflow
版本:CSS2  兼容性:IE4+ NS6+ 继承性:无
 
语法: 
 
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版本:IE6+专有属性 继承性:无

 
语法:
 
text-overflow : clip | ellipsis
 
参数:
 
clip :  不显示省略标记(...),而是简单的裁切
ellipsis :  当对象内文本溢出时显示省略标记(...)
 
说明:
 
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
对应的脚本特性为textOverflow。请参阅我编写的其他书目。
 
示例:
 
div { text-overflow : clip; }

代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width="100%"  border="1" cellspacing="2" cellpadding="2" style="table-layout:fixed">
  <tr>
    <td width="10%">s</td>
    <td><div STYLE="width:60%;overflow:hidden;text-overflow:ellipsis"> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
    <td width="30%">&nbsp;</td>
  </tr>
  <tr>
    <td>d</td>
    <td><div STYLE="width:60%; overflow:hidden;text-overflow:ellipsis"> <nobr> asdfffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffdata goes here </nobr></div></td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>
 

用css实现文字的自动隐藏

不可换行 (不换行) overflow版本:CSS2  兼容性:IE4+ NS6+ 继承性:无 语法:  overflow : visible | auto | hidden | scroll  参...
  • xfxiaoyan2010
  • xfxiaoyan2010
  • 2010年05月02日 08:48
  • 335

CSS实现超出DIV宽度文字自动隐藏并显示省略号

当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: padding-left: 5px; text-align: left; text-overflow:ellipsi...
  • ale2012
  • ale2012
  • 2016年01月26日 10:51
  • 791

用css实现文字自动隐藏

不可换行 (不换行) overflow版本:CSS2  兼容性:IE4+ NS6+ 继承性:无 语法:  overflow : visible | auto | hidden | scroll  参...
  • afdfgg
  • afdfgg
  • 2004年11月28日 15:25
  • 1239

div css 超出文字自动隐藏代码

在网站制作过程中往往有的时候某个模块文字多了影响美观, 这时候我们就可以用div css 来控制这个模块超出大小部分的文字自动隐藏起来,又起到SEO效果,这样搜索引擎是可以看到的,未隐藏之前与隐藏之后...
  • taobaoz
  • taobaoz
  • 2014年01月07日 00:26
  • 1365

js+css+div的点击后显示或者隐藏

js+css+div的点击后显示或者隐藏 JS Bin           function showaa(obj)     {...
  • lbsaiyun
  • lbsaiyun
  • 2016年10月24日 16:10
  • 735

CSS 实现 系统登录界面 (一)

设置页面背景被全部覆盖实现过程中出现,图片周边存在边框,白边。这个边是 body 标签的 边框,去除边框实现代码详细如下: 可除去页面的边界。 设置登录界面中提交表单的文本框位置,可以通过...
  • u013630349
  • u013630349
  • 2016年08月11日 18:31
  • 1303

【模块】二维三点定位算法

class Program { static void Main(string[] args) { ...
  • RazilFelix
  • RazilFelix
  • 2017年06月23日 15:29
  • 902

css 技巧 文字只显示前几位

Title #divcss5{width:150px; } #divcss5 li{width:50px;overflow:hidden;text-overflow:ellips...
  • tu1091848672
  • tu1091848672
  • 2018年01月21日 23:14
  • 24

css隐藏下拉菜单的设置,当鼠标放上去时,自动显示下拉菜单

html部分:  ....      .....      .....     css部分: #a ul li{ dis...
  • skywordphp
  • skywordphp
  • 2016年12月07日 17:02
  • 2482

纯CSS打造一个顶部工具条(兼容所有浏览器)

可能许多人在制作顶部DIV跟随滚动的时候认为用JS才可以实现,这里我用CSS写了一个顶部工具条,代码如下; DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
  • dyllove98
  • dyllove98
  • 2013年05月25日 14:31
  • 1034
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS实现文字的自动隐藏 并且出现三点
举报原因:
原因补充:

(最多只允许输入30个字)