为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

陪伴而非守候 2019-07-22 15:06:51

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

有什么好的方法可以用普通的HTML和CSS来截断文本,这样动态内容就可以适应固定的宽度和高度的布局了吗?

我一直在截断服务器端逻辑宽度(即一个盲目猜测的字符数),但由于‘w’比‘i’宽,这往往是次优,还要求我重新猜测(并不断调整)每个固定宽度的字符数。理想情况下,截断发生在浏览器中,浏览器知道物理呈现文本的宽度。

我发现IE有一个text-overflow: ellipsis属性,它完全可以实现我想要的功能,但我需要它是跨浏览器的。这个财产似乎(有点?)标准但不受Firefox的支持。我发现五花八门 解决办法基于overflow: hidden,但它们要么不显示省略号(我希望用户知道内容被截断),要么一直显示它(即使内容没有被截断)。

有没有人有一个很好的方式拟合动态文本在一个固定的布局,或服务器端截断的逻辑宽度是否像我现在要得到的一样好?


查看完整描述

3 回答

?
慕娘9325324

 text-overflow: ellipsis现在支持截至Firefox 7(2011年9月27日发布)。耶!我最初的回答是有历史记载的。

贾斯汀麦克斯韦有跨浏览器CSS解决方案。然而,它的缺点是不允许在Firefox中选择文本。检查他在马特·斯奈德的博客上发表的客座帖子有关此操作的详细信息。

注意,此技术还防止使用innerHTML属性在Firefox中。请参阅这篇文章的结尾,以找到解决办法。

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);
    }};

看见马特·斯奈德的文章解释了这是怎么回事.


查看完整回答
反对 回复 2019-07-22
?
侃侃尔雅

用CSS截断长字符串:关注浏览器支持的新答案

演示http://jsbin.com/leyukama/1/(我使用jsbin是因为它支持旧版本的IE)。

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }</style><span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

不需要使用-ms-文本溢出CSS属性:它是文本溢出CSS属性的同义词,但是从6到11的IE版本已经支持文本溢出CSS属性。

成功地(在Browserstack.com上)在Windows操作系统上测试Web浏览器:

  • IE6至IE11
  • 歌剧10.6、11.1、15.0、20.0
  • 铬14,铬20,铬25
  • Safari 4.0,Safari 5.0,Safari 5.1
  • Firefox 7.0,Firefox 15

Firefox:正如SimonLieschke(另一个答案)指出的,Firefox只支持Firefox 7的文本溢出CSS属性(2011年9月27日发布)。

我在Firefox3.0和Firefox6.0(不支持文本溢出)上双重检查了这个行为。

还需要在MacOS网络浏览器上进行进一步的测试。

注意:当应用省略号时,您可能希望在鼠标悬停上显示工具提示,这可以通过javascript来完成,请参见以下问题:HTML文本溢出省略检测HTML-只有在激活省略号时才能显示工具提示

资源:


查看完整回答
反对 回复 2019-07-22
?
幕布斯6054654

该问题的另一个解决方案可能是以下一组CSS规则:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;}.ellipsis:after{
  content:'...';}

上面的CSS唯一的缺点是它会添加“.”无论文本是否溢出容器。不过,如果您有一组元素,并且确信内容会溢出,那么这个规则将是一组更简单的规则。

我的两分钱。贾斯汀·麦克斯韦的原创技巧


查看完整回答
反对 回复 2019-07-22

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信