CSS文本溢出用省略号代替
文章转自王牌软件
站长推荐:NSetup一键部署软件
一键式完成美化安装包制作,自动增量升级,数据统计,数字签名。应对各种复杂场景,脚本模块化拆分,常规复杂的脚本代码,图形化设置。无需专业的研发经验,轻松完成项目部署。(www.nsetup.cn)
		
			
			
			
			
				
					
			
		
		
			
			
			
			
				
					
			
		
		
			
			
			
			
				
					
			
		
    
    
    
只回答业务咨询
            站长推荐:NSetup一键部署软件
一键式完成美化安装包制作,自动增量升级,数据统计,数字签名。应对各种复杂场景,脚本模块化拆分,常规复杂的脚本代码,图形化设置。无需专业的研发经验,轻松完成项目部署。(www.nsetup.cn)
语法:
text-overflow : clip | ellipsis
参数:
clip :  不显示省略标记(…),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis :  当对象内文本溢出时显示省略标记(…)
说明:
设置或检索是否使用一个省略标记(…)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
| 
					 1 2 3 4 5 6 7  | 
						.ellipsis {     width:300px;     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; }  | 
					
为了适应多种浏览器,可以写这下面这样:
| 
					 1 2 3 4 5 6 7 8 9  | 
						.ellipsis {     width: 180px;      white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;     -o-text-overflow: ellipsis; /*For Opera*/     -ms-text-overflow: ellipsis; /*For IE8*/     -moz-binding: url(assets/xml/ellipsis.xml#ellipsis); /*For Firefox3.x*/ }  | 
					
为了在firefox中可用,需要创建XUL,它应该被保存为ellipsis.xml:
| 
					 1 2 3 4 5 6 7 8 9 10 11 12 13 14  | 
						<?xml version="1.0"?> <bindings    xmlns="http://www.mozilla.org/xbl"   xmlns:xbl="http://www.mozilla.org/xbl"   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >     <binding id="ellipsis">         <content>             <xul:window>                 <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>             </xul:window>         </content>     </binding> </bindings>  | 
					
把它保存在assets/xml/ellipsis.xml#ellipsis目录中。
学习日记,兼职软件设计,软件修改,毕业设计。
本文出自 学习日记,转载时请注明出处及相应链接。
本文永久链接: https://www.softwareace.cn/?p=881