Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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 and all the text that extends past the border is not visible. I would like to truncate the text so that it fits inside the box and has an ellipsis (...) appended on the end. For example:

|----div width------|
 Here is some sample text that is too long.
 Here is some sam...

Obviously in the example it's easy because the code tag uses a fixed-width font so it's as simple as counting characters. I have a variable-width font so if they enter "WWWWWWWWWWW" it will fill up in much fewer characters than "................" would.

What's the best way to do this? I found a potential solution for simply finding the actual pixel width of the text here: http://www.codingforums.com/archive/index.php/t-100367.html

But even with a method like that, it's a bit awkward to implement the ellipsis. 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?

EDIT: I have decided based on the answers that my original approach is best, except I have tried to improve on the solution in the link above by not creating a separate td element simply for measuring, which feels like a hack.

Here is my code:

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

And styles:

.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;
}

and the javascript that trims and adds the ellipsis:

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;
    }
}

The "line1" and "line2" divs get passed to the function. It works in the case of a single word input like "WWWWWWWWWWWWWWWWW" but does not work a multi-word input "WWWWW WWWWW WWWWW" because it just adds line breaks and measures the text as being the width of "WWWWW".

Is there a way I can fix this without resorting to copying the text into a hidden measuring element? Some way to set the style of the line divs so that they don't wrap text?

like image 378
Brian Schroth Avatar asked Nov 30 '09 15:11

Brian Schroth


People also ask

How do I force text-overflow ellipsis?

To force overflow to occur and ellipses to be applied, the author must apply the nowrap value to the white-space property on the element, or wrap the content in a <NOBR> tag.

Can I use text-overflow ellipsis?

Definition and Usage. The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

How do you install an ellipsis?

An ellipsis is a set of three periods ( . . . ) indicating an omission. Each period should have a single space on either side, except when adjacent to a quotation mark, in which case there should be no space.


4 Answers

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.

like image 103
BalusC Avatar answered Sep 28 '22 11:09

BalusC


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>
like image 30
Binyamin Avatar answered Sep 28 '22 11:09

Binyamin


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

like image 24
Gausie Avatar answered Sep 28 '22 11:09

Gausie


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)

like image 35
Jacob Mattison Avatar answered Sep 28 '22 11:09

Jacob Mattison