如何模仿文本溢出：Firefox 中的省略号？答案

【问题标题】：How can I mimic text-overflow: ellipsis in Firefox?如何模仿文本溢出：Firefox 中的省略号？
【发布时间】：2010-12-21 16:19:26
【问题描述】：

我在 div 中包含一些动态文本，该文本设置为用户在文本框字段中输入的任何内容。如果文本不适合 div，那么现在它只会在边缘被切断，并且所有超出边界的文本都不可见。我想截断文本，使其适合框内并在末尾附加省略号 (...)。例如：

|----div width------|
 Here is some sample text that is too long.
 Here is some sam...

显然，在示例中这很容易，因为代码标签使用固定宽度的字体，因此就像计算字符一样简单。我有一个可变宽度字体，所以如果他们输入“WWWWWWWWWWW”，它会比“......”填充更少的字符。

最好的方法是什么？我在这里找到了一个潜在的解决方案，可以简单地找到文本的实际像素宽度：http://www.codingforums.com/archive/index.php/t-100367.html

但即使使用这样的方法，实现省略号也有点尴尬。因此，如果它是 20 个字符并且我发现它不适合，我将不得不截断为 19，添加省略号，然后再次检查它是否适合。然后截断为 18（加上省略号）并重试。然后再次。再一次......直到它适合。有没有更好的办法？

编辑：我已经根据答案决定我的原始方法是最好的，除了我试图通过不创建单独的 td 元素来改进上面链接中的解决方案来简单地进行测量，这感觉就像一个 hack。

这是我的代码：

<div id="tab" class="tab">
    <div id="tabTitle" class="tabTitle">
        <div class="line1">user-supplied text will be put here</div>
        <div class="line2">more user-supplied text will be put here</div>
    </div>
</div>

和样式：

.tab {
padding: 10px 5px 0px 10px;
margin-right: 1px;
float: left;
width: 136px;
height: 49px;
background-image: url(../images/example.gif);
background-position: left top;
background-repeat: no-repeat;
}    

.tab .tabTitle {
    height: 30px;
width: 122px;
    overflow: hidden;
    text-overflow: ellipsis;
font-size: 12px;
font-weight: bold;
color: #8B8B8B;
}

.tab .tabTitle .line1, .tab .tabTitle .line2 {
    display:inline;
    width:auto;
}

以及修剪和添加省略号的 javascript：

function addOverflowEllipsis( containerElement, maxWidth )
{
    var contents = containerElement.innerHTML;
    var pixelWidth = containerElement.offsetWidth;
    if(pixelWidth > maxWidth)
    {
        contents = contents + "…"; // ellipsis character, not "..." but "…"
    }
    while(pixelWidth > maxWidth)
    {
        contents = contents.substring(0,(contents.length - 2)) + "…";
        containerElement.innerHTML = contents;
        pixelWidth = containerElement.offsetWidth;
    }
}

“line1”和“line2” div 被传递给函数。它适用于像“WWWWWWWWWWWWWWWWW”这样的单字输入，但不适用于多字输入“WWWWW WWWWW WWWWW”，因为它只是添加换行符并将文本测量为“WWWWW”的宽度。

有没有一种方法可以解决这个问题，而无需将文本复制到隐藏的测量元素中？有什么方法可以设置行 div 的样式以便它们不换行？

【问题讨论】：

现在 Firefox 7 原生支持此功能！

标签： javascript html string truncation css

【解决方案1】：

试试这个：

Link One

更新：

如果您使用专有的 {word-wrap: break-word;}，IE 将强制换行。现代浏览器可以有默认的 {overflow: visible;}，它们会正常溢出，而无需扩展容器。

【讨论】：

【解决方案2】：

很简单，不，没有更好的方法而不求助于黑客。

例如，您可以使用 position:absolute span 将“...”定位在实际内容之上，并在容器上设置 overflow:hidden，并且仅在内容适合时隐藏额外的 span容器。那会让你只运行一次截断代码。

就我个人而言，我只是多运行几次像素宽度计算。设置文本和读取宽度是一个快速操作，所以应该不会引起注意。

【讨论】：

【解决方案3】：

如果您使用的是 jQuery，我使用的是 great plugin。

或者，[this example] (404 NOT FOUND!) 似乎可以跨浏览器工作。

有任何问题，请在 cmets 中联系我！

404 链接：http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php

【讨论】：

我没有使用 jQuery，所以这帮不了我。您发布的示例还可以，但有些错误，它会将省略号放在应该的位置并且看起来不太好。我坚持使用我原来的解决方案（将文本存储在一个可扩展的容器中并测量它的宽度，然后迭代地切掉字符直到它适合）。这适用于单个长字符串，但如果文本包含空格，则文本只是换行。我需要文本是单行，无论它有多长或包含什么。
你应该获取 jQuery 的副本。这可能是解决此问题的最简单方法，您肯定会在开发的其他地方找到适用于它的应用程序。
作为企业无人机获得 jQuery 的批准是一项艰巨的任务，所以不幸的是，我仍在寻找非 jQuery 的替代品。
在这种情况下，您可能会发现查看我发布的插件并检查是否可以在不使用库的情况下应用逻辑很有用

【解决方案4】：

不，这不是一个简单的任务。一年前我不得不做同样的事情，发现即使是 Internet Explorer（从第 6 版开始）、Opera 和 Safari 也能做到，但没有 Firefox。很抱歉，只有黑客才能拯救你

【讨论】：

【解决方案5】：

新版本的 CSS (CSS3) 应该包含 text-overflow:ellipsis，它会为您完成这项工作。它目前适用于 IE 版本 6 及更高版本，以及 Safari 和 Chrome。 Firefox 不支持它，所以这还不是一个真正有用的答案，但值得记住的是，最终真正最好的方法是让 CSS 处理这个问题。

CSS3 规范草案：http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

支持的浏览器：http://www.quirksmode.org/css/contents.html（向下滚动到底部附近的“文本溢出”）

【讨论】：

当然，我还是要支持 IE6，所以“最终”大概是 20 年后 :(
实际上（并且有点令人惊讶）IE6 已经有了 text-overflow:ellipsis 功能，所以你没问题。
修改了我的帖子，说明当前支持哪些浏览器：IE6 及更高版本、Safari、Chrome。

【解决方案6】：

使用text-overflow:ellipsis。它不仅限于 IE...大多数主要浏览器都可以做到这一点。
但是如果你不能为此here is a jQuery plugin。

【讨论】：

【解决方案7】：

试试dojox.html.ellipsis

【讨论】：

谢谢，我会试一试...与 jQuery 不同，dojo 是我们已经在使用的库，所以这可能是完美的。

【解决方案8】：

有什么方法可以设置行 div 的样式以便它们不换行？

你有white-space: nowrap 。是的，这也适用于古老的浏览器。

【讨论】：

谢谢，我想这会很完美。对于奖励积分，请诊断为什么前几天我使用实际的省略号字符 (...) 进行了测试，但今天测试它显示为未知字符问号框。
您的响应编码错误。检查标题和元标记。必须是UTF-8。

【解决方案9】：

仅回答您提出的问题之一：

如果是 20 个字符，我发现它不适合，我将不得不截断为 19，添加省略号，然后然后检查它是否再次适合。然后截断为 18（加上省略号）和再试一次。然后再次。和再次......直到它适合。有没有更好的方法？

找到正确长度的更快方法是将绳子切成两半，测试它是否合适。如果是这样：重新添加原始长度的四分之一，如果它没有减少四分之一，然后测试它是否合适。以原始长度的 1/8、1/16、1/32、... 递归重复，直到此加/减值小于 1。

这是一种搜索算法：对于长度超过几个单词的字符串，您通常可以将需要在 DOM 中执行的测试数量减少 10 倍。

【讨论】：

【解决方案10】：

这个问题肯定也出现在 Firefox 上。

HTML

<div class="ellipsis">Here goes too long text and when it is takes more than 200px in "end" of the text appears "..."</div>

CSS

.ellipsis{
width:200px;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-moz-binding:url('bindings.xml#ellipsis');//issue for Firefox
}

bindings.xml

<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="none">
    <content><children/></content>
</binding>
<binding id="ellipsis">
    <content>
        <xul:label crop="end"><children/></xul:label>
    </content>
    <implementation>
        <field name="label">document.getAnonymousNodes(this)[0]</field>
        <field name="style">this.label.style</field>
        <property name="display">
            <getter>this.style.display</getter>
            <setter>if(this.style.display!= val)this.style.display=val</setter>
        </property>
        <property name="value">
            <getter>this.label.value</getter>
            <setter>if(this.label.value!=val)this.label.value=val</setter>
        </property>
        <method name="update">
            <body>
                var strings= this.textContent.split(/\s+/g)
                if(!strings[0])strings.shift()
                if(!strings[strings.length-1])strings.pop()
                this.value=strings.join('')
                this.display=strings.length?'':'none'
            </body>
        </method>
        <constructor>this.update()</constructor>
    </implementation>
    <handlers>
        <handler event="DOMSubtreeModified">this.update()</handler>
    </handlers>
</binding>
</bindings>

【讨论】：

这会导致任何性能问题吗？是否有使用此 hack 的任何类型的基准？
不幸的是，使用此 Firefox 绑定 xml 的文本无法选择。
@Ms2ger：确实，见stackoverflow.com/questions/4927257/…

【解决方案11】：

使用 Opera：

-o-text-overflow:ellipsis;

【讨论】：

【解决方案12】：

我将 Binyamin 的回复中的 this.value=strings.join('') 更改为 this.value=strings.join(' ')，效果很好！

【讨论】：

【解决方案13】：

关于 Firefox 4.0 和尚未实现的 text-overflow:ellipsis CSS 属性：

This 链接给出了问题的部分解决方案。

它只使用 css 产生与 text-overflow:ellipsis 相似的结果。

【讨论】：