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