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

戏子无情 提交于 2019-11-29 01:19:17

Some way to set the style of the line divs so that they don't wrap text?

There you have the white-space: nowrap for. Yes, this works in ancient browsers as well.

Binyamin

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>
Gausie

If you're using jQuery, there's a great plugin I use.

Alternatively, [this example] (404 NOT FOUND!) seems to work cross browser.

Any questions, hit me up in the comments!

404 link: http://www.hedgerwow.com/360/dhtml/text_overflow/demo2.php

The new version of CSS (CSS3) should include text-overflow:ellipsis, which does this for you. It currently works in IE versions 6 and up, as well as Safari and Chrome. It's not supported by Firefox, so this isn't really a useful answer yet, but it's worth keeping in mind that the real best way will, eventually, be to let CSS handle this.

CSS3 spec draft: http://www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

Supported browsers: http://www.quirksmode.org/css/contents.html (scroll down to "text-overflow" near the bottom)

Quite simply, no, there's no better way without resorting to hacks.

You could, for example, use a position:absolute span to position your "..." on top of the actual content, with overflow:hidden set on the container, and only hide the extra span if the content fits within the container. That'd let you run the truncation code only once.

Personally, I'd just run the pixel width calculation a few extra times. Setting the text and reading the width is a fast operation, so it shouldn't be noticeable.

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.

To answer just one of the points you raise:

So if it's 20 characters and I find that it doesn't fit, I would have to truncate to 19, add the ellipsis, and then check if it fits again. Then truncate to 18 (plus the ellipsis) and try again. And again. And again...until it fit. Is there a better way?

A much faster way of finding the correct length is to cut the string in half, test that to see if it fits. If it does: add a quarter of the original length back on, and if it doesn't lop a quarter off, then test that to see if it fits. Repeat recursively with 1/8th, 1/16th, 1/32th, ... of the original length, until this add/subtract value is less than 1.

It's a seeking algorithm: for strings that are longer than just a few words you can typically cut the number of tests you need to perform in the DOM by a factor of 10.

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.

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

With Opera:

-o-text-overflow:ellipsis;

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

basiloungas

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.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!