How Can I Mimic Text-overflow: Ellipsis In Firefox?

April 21, 2024 Post a Comment

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 the edge

Solution 1:

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.

Solution 2:

This issue must be working on Firefox too.

HTML

<div class="ellipsis">Here goes too longtextandwhen 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

<bindingsxmlns="http://www.mozilla.org/xbl"xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><bindingid="none"><content><children/></content></binding><bindingid="ellipsis"><content><xul:labelcrop="end"><children/></xul:label></content><implementation><fieldname="label">document.getAnonymousNodes(this)[0]</field><fieldname="style">this.label.style</field><propertyname="display"><getter>this.style.display</getter><setter>if(this.style.display!= val)this.style.display=val</setter></property><propertyname="value"><getter>this.label.value</getter><setter>if(this.label.value!=val)this.label.value=val</setter></property><methodname="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><handlerevent="DOMSubtreeModified">this.update()</handler></handlers></binding></bindings>

Solution 3:

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

Solution 4:

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)

Solution 5:

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.

Html5 School