19

我在 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 的样式，以便它们不换行？

4

13 回答 13

11

某种方式来设置行 div 的样式，以便它们不换行？

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

于 2009-12-08T00:14:27.020 回答
5

这个问题也必须在 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
}

绑定.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>
于 2010-08-17T14:28:51.337 回答
4

如果你使用 jQuery，我使用了一个很棒的插件。

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

有任何问题，在评论中打我！

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

于 2009-11-30T15:20:42.460 回答
3

新版本的 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 （向下滚动到底部附近的“文本溢出”）

于 2009-11-30T15:27:08.360 回答
1

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

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

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

于 2009-11-30T15:19:57.613 回答
1

使用text-overflow:ellipsis. 它不是 IE-only... 大多数主流浏览器都可以做到这一点。
但如果你不能，这里有一个 jQuery 插件。

于 2009-11-30T16:08:21.597 回答
1

仅回答您提出的观点之一：

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

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

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

于 2010-07-13T09:40:53.423 回答
0

试试这个：

链接一

更新：

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

于 2009-11-30T15:18:44.430 回答
0

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

于 2009-11-30T15:26:51.353 回答
0

试试dojox.html.ellipsis

于 2009-12-07T17:23:13.250 回答
0

使用歌剧：

-o-text-overflow:ellipsis;
于 2010-11-18T11:55:07.430 回答
0

我从Binyaminthis.value=strings.join('')的回复改为，它对我来说很好！this.value=strings.join(' ')

于 2011-03-08T20:03:58.197 回答
0

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

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

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

于 2011-04-22T09:00:22.977 回答