栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用CSS截断长字符串:可行吗?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用CSS截断长字符串:可行吗?

更新: Firefox 7

text-overflow:ellipsis
现在已受支持。好极了!我的原始答案是历史记录。

请注意,此技术还可以防止使用

innerHTML
Firefox中的属性更新Javascript中节点的内容。解决方法请参阅本文结尾。

CSS

.ellipsis {    white-space: nowrap;    overflow: hidden;    text-overflow: ellipsis;    -o-text-overflow: ellipsis;    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');}

ellipsis.xml
文件内容

<?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>

更新节点内容

要以可在Firefox中正常工作的方式更新节点的内容,请使用以下命令:

var replaceEllipsis(node, content) {    node.innerHTML = content;    // use your favorite framework to detect the gecko browser    if (YAHOO.env.ua.gecko) {        var pnode = node.parentNode, newNode = node.cloneNode(true);        pnode.replaceChild(newNode, node);    }};

请参阅Matt Snider的帖子以获取有关其工作原理的解释



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575542.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号