页面显示一段文字的时候,我们不希望他换行,又不想让他超出一定长度的时候,我们经常会在后台将过长的文字截取前面一段,然后在后面加上"..."。然而这样做,搜索引擎就搜索不到那段被截掉的文字了。有些人使用JS来实现同样的效果,将多余的文字截取,这样做成本太高。其实CSS就又这样的功能。只要很简单的代码,就可以在几乎所有浏览器下使用。当然在IE下更简单。
.txt{
overflow:hidden;//隐藏多余的文字
white-space:nowrap;//保证文字不换行
text-overflow:ellipsis;//文字后加"..." clip表示什么都不加
width:60%;//宽度,也可以用PX,不过用百分比的话,容易看出效果。
}
只要在div 的class上设置改类就行了,这个类只能在IE中使用,其实其他FF,opera也有自己的解决方法,下面是同样的类:
.txt{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis; /* for IE */
-o-text-overflow: ellipsis; /* for Opera */
-icab-text-overflow: ellipsis; /* for iCab */
-khtml-text-overflow: ellipsis; /* for Konqueror Safari */
-moz-text-overflow: ellipsis; /* for Firefox,mozilla */
-webkit-text-overflow: ellipsis; /* for Safari,Swift*/
width:60%
}
基本非IE的浏览器的私有属性都会以-xxx-这样开始,-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的,-khtml-就是以KHTML为引擎的浏览器(如Konqueror Safari)、-moz-就是以mozilla的Gecko为引擎的浏览器(如Firefox,mozilla)、-webkit-就是以Webkit 渲染引擎(是KHTML的衍生产品)的浏览器(如Safari、Swift)。
对于FF也可以使用这个:
.txt:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */
这样使用的时候就可以放心使用了。
因为这是CSS3标准,很多浏览器还不支持,了解更多请去CSS3.INFO
分享到:
相关推荐
听说用css的 text-overflow: ellipsis 也可以实现,于是尝试了下。 发现除了设置 text-overflow 属性为 ellipsis 外 还需要设置 white-space 属性为 nowrap (限制不换行) 和 overflow 属性为 hidden (隐藏溢出...
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏
任意长度文本 方法二:适用js截取 <HTML> <HEAD> <TITLE>JQUERY 文本截取方法</TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery...
.text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word-break:keep-all;/* 不换行 */ whitewhite-space:nowrap;/* 不换行 */ overflow:hidden;/*...
解决办法:在css中设置 text-overflow: ellipsis; text-overflow: 2、换行显示 解决办法: 在css中设置 white-space:normal; white-space:(1)normal : 默认 。空白会被浏览器忽略。 (2) pre : 换行和...
文本修饰属性text-decoration.html 文本修饰属性text-decoration用法。 文字垂直对齐.html 文字垂直对齐用法。 字母大小写转换.html 字母大小写转换用法。 字体实例手把手――字体花样.html 演示字体...
CSS3属性“ text-overflow”只能截断一行文本,而IE7和更低版本不支持。特征HTML截断为指定的行数,包括环绕其他浮动元素HTML。 深度HTML截断并保留所有非type3(文本)节点截断后缀的可选规范,例如… 使用可配置...
目标是创建没有JavaScript,没有CSS,没有UpdatePanel,没有WebServices的Web应用程序。 支持的浏览器: IE 7.0+, Firefox 3.0+, Chrome 2.0+, Opera 9.5+, Safari 3.0+ 注:ExtAspNet基于一些开源的程序ExtJS, ...
-修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
13.4.3 overflow属性... 407 13.4.4 clip属性... 408 13.4.5 visibility属性... 408 13.4.6 cursor属性... 409 13.4.7 相关的颜色属性... 410 13.5 框... 412 13.5.1 轮廓属性... 412 13.5.2 定位属性... 413...
14.6.9 用text()来匹配文本节点 452 14.6.10 使用“或”操作符| 453 14.7 选择节点的表达式 454 14.7.1 节点轴 454 14.7.2 表达式类型 462 14.8 缺省的模板规则 471 14.8.1 元素的缺省规则 471 14.8.2 文本节点的...
14.6.9 用text()来匹配文本节点 452 14.6.10 使用“或”操作符| 453 14.7 选择节点的表达式 454 14.7.1 节点轴 454 14.7.2 表达式类型 462 14.8 缺省的模板规则 471 14.8.1 元素的缺省规则 471 14.8.2 文本节点的...
13.4.3 overflow属性... 407 13.4.4 clip属性... 408 13.4.5 visibility属性... 408 13.4.6 cursor属性... 409 13.4.7 相关的颜色属性... 410 13.5 框... 412 13.5.1 轮廓属性... 412 13.5.2 定位属性... 413...
13.4.3 overflow属性... 407 13.4.4 clip属性... 408 13.4.5 visibility属性... 408 13.4.6 cursor属性... 409 13.4.7 相关的颜色属性... 410 13.5 框... 412 13.5.1 轮廓属性... 412 13.5.2 定位属性... 413...
第一部分 XML简介... 9 第1章 XML概览... 9 1.1 什么是XML. 10 1.1.1 XML是元标记语言... 10 1.1.2 XML描述的是结构和语义,而... 407 13.4.3 overflow属性... 407 13.4.4 clip属性... 408 13.4.5...