发表新帖
发表新帖

How can I mimic text-overflow: ellipsis in Firefox?

前端 未结
关注
13 1091
抹茶落季
抹茶落季 2020-12-15 19:04

I have some dynamic text contained in a div that is set to whatever a user enters in a textbox field. If the text doesn\'t fit in the div, right now it just gets cut off at

相关标签:
13条回答
  • 闹比i
    2020-12-15 19:19

    Use text-overflow:ellipsis. Its not IE-only... Most major browser can do this.
    But if you can't here is a jQuery plugin for this.

    0 讨论(0)
  • 执念已碎
    2020-12-15 19:19

    No, it's not simple task. I had to do same thing year ago and found that even Internet Explorer (from version 6), Opera and Safari can do it, but no Firefox. So sorry, only hacks can save you

    0 讨论(0)
  • 离开以前
    2020-12-15 19:22

    This issue must be working on Firefox too.

    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>
    0 讨论(0)
  • 囚心锁ツ
    2020-12-15 19:23

    I changed this.value=strings.join('') to this.value=strings.join(' ') from Binyamin's reply, and it worked for me fine!

    0 讨论(0)
  • 忘掉有多难
    2020-12-15 19:26

    Try this:

    Link One

    Update:

    If you use the proprietary {word-wrap: break-word;}, IE will force a line break. Modern browsers could have the default {overflow: visible;}, and they would overflow properly, without expanding the container.

    0 讨论(0)
  • 孤独总比滥情好
    2020-12-15 19:27

    About Firefox 4.0 and the, still unimplemented, text-overflow:ellipsis CSS property:

    This link gives a partial solution to the problem.

    It produces a similar result to text-overflow:ellipsis using only css.

    0 讨论(0)
 看不清?
提交回复
热议问题