我怎样才能模仿文本溢出:Firefox中的省略号？

Question

我有一些动态文本包含在div中,该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元素简单地用于测量来改进上述链接中的解决方案,这感觉就像一个黑客.

这是我的代码:

<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的样式,以便它们不包装文本？

Answer 1

某种方式设置行div的样式,以便它们不包装文本？

那里有你的white-space: nowrap.是的,这也适用于古老的浏览器.

Answer 2

这个问题也必须适用于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>