Wie kann ich imitieren Text-Überlauf: Auslassungszeichen in Firefox?

Question

Ich habe einigen dynamischen Text in einem div enthalten, die alles, was ein Nutzer in einem Textfeld gesetzt. Wenn der Text nicht in dem div paßt, es jetzt gerade wird am Rande und die ganzen Text, der über die Grenze erstreckt, ist nicht sichtbar abgeschnitten. Ich mag den Text kürzen, so dass es in der Box paßt und hat ein Auslassungszeichen (...) am Ende angefügt. Zum Beispiel:

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

Offensichtlich im Beispiel ist es einfach, weil der Code-Tag einen verwendet Schriftart mit fester Breite, so dass es als das Zählen Zeichen so einfach. Ich habe eine Variable-Breite-Schriftart so, wenn sie eintreten „wwwwwwwwwww“ es in viel weniger Zeichen füllen wird als „................“ würde.

Was ist der beste Weg, dies zu tun? Ich fand eine mögliche Lösung für einfach die tatsächliche Pixelbreite des Textes finden Sie hier: http://www.codingforums.com/archive/index.php/t-100367.html

Aber auch mit einem Verfahren, wie das, es ist ein wenig umständlich auf die Auslassungspunkte zu implementieren. Also, wenn es 20 Zeichen ist und ich finde, dass es nicht passt, würde ich bis 19, fügen Sie die Auslassungspunkte kürzen, und dann prüfen, ob er wieder passt. gestutzt dann auf 18 (plus Auslassung) und versuchen Sie es erneut. Und wieder. Und wieder ... bis sie passte. Gibt es einen besseren Weg?

EDIT:. Ich habe auf der Grundlage der Antworten entschieden, dass mein ursprünglicher Ansatz am besten ist, es sei denn ich versucht habe, auf der Lösung in dem obigen Link nicht durch die Schaffung ein separates td Elements einfach für die Messung, die wie ein Hack fühlt sich zu verbessern

Hier ist mein 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>

Und Stile:

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

und das Javascript, das trimmt und fügt die Auslassungspunkte:

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

Die „Linie 1“ und „line2“ divs erhalten an die Funktion übergeben. Es funktioniert im Fall einer einzelnen Worteingabe wie „WWWWWWWWWWWWWWWWW“ funktioniert aber nicht eine Multi-Worteingabe „WWWWW WWWWW WWWWW“, weil es kommt noch hinzu, Zeilenumbrüche und misst den Text als die Breite „WWWWW“ zu sein.

Gibt es eine Weise, die ich dies, ohne auf das Kopieren des Textes in ein verstecktes Messelement beheben kann? Einige Weise den Stil der Linie divs zu setzen, so dass sie nicht Text wickeln?

Answer 1

  

Einige Art und Weise den Stil der Linie zu setzen divs, so dass sie Text nicht einwickeln?

Sie haben dort die white-space: nowrap für. Ja, das funktioniert auch in alten Browsern.

Answer 2

Dieses Problem muss auch auf Firefox arbeiten.

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>

Answer 3

Wenn Sie jQuery verwenden, gibt es eine große Plugin rel="nofollow ich verwende.

Alternativ [dieses Beispiel] (404 NOT FOUND!) Scheint Cross-Browser zu arbeiten.

Haben Sie Fragen, traf mich in den Kommentaren auf!

404 Link: http://www.hedgerwow.com/360/ dHTML / text_overflow / demo2.php

Answer 4

Die neue Version von CSS (CSS3) sollte enthalten text-overflow:ellipsis, die dies für Sie tut. Es arbeitet zur Zeit in IE-Versionen 6 und höher, sowie Safari und Chrome. Es ist nicht von Firefox unterstützt, so ist dies nicht wirklich eine nützliche Antwort noch nicht, aber es lohnt sich wenn man bedenkt, dass die reale beste Weg wird schließlich sein zu lassen CSS damit umgehen.

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

Unterstützte Browser: http://www.quirksmode.org/css/contents.html (nach unten scrollen zu "text-Überlauf" in der Nähe der Unterseite)

Answer 5

Ganz einfach, nein, es gibt keinen besseren Weg, um Hacks ohne greifen zu müssen.

Sie könnten zum Beispiel verwenden, um eine Position: absolute Spanne IhrFormal in der Position „...“ auf den eigentlichen Inhalt, mit Überlauf: auf den Behälter gesetzt versteckt, und nur die zusätzliche Spanne verstecken, wenn der Inhalt innerhalb paßt der Kontainer. Das würde lassen Sie das Abschneiden Code nur einmal ausgeführt.

Persönlich würde ich laufen nur die Pixelbreite Berechnung ein paar zusätzliche Zeit. Einstellen des Textes und das Lesen die Breite ist eine schnelle Operation, so sollte es nicht wahrnehmbar sein.

Answer 6

Mit text-overflow:ellipsis. Es ist nicht IE-only ... Die meisten großen Browser kann dies tun.
Aber wenn Sie nicht hier ist eine jQuery-Plugin für diesen.

Answer 7

Um nur einer der Punkte, beantworten Sie erhöhen:

  

Wenn es also 20 Zeichen ist und ich finde,   dass es nicht passt, würde ich muss   gestutzt auf den Auslassungs bis 19, hinzufügen und   dann prüfen, ob er wieder passt. Dann   trunkieren bis 18 (plus der Auslassungs) und   Versuch es noch einmal. Und wieder. Und   wieder ... bis es passt. Gibt es eine   besserer Weg?

Ein viel schneller Weg, um die richtige Länge zu finden, ist die Zeichenfolge in zwei Hälften geschnitten, Test, um zu sehen, ob sie paßt. Ist dies der Fall: zurück auf ein Viertel der ursprünglichen Länge hinzufügen, und wenn es nicht ab ein Viertel stutzt, dann ist das testen, um zu sehen, ob sie paßt. Wiederholen Sie rekursiv mit 1/8, 1/16, 1 / 32th, ... der ursprünglichen Länge, bis diese Additions / Subtraktions-Wert kleiner als 1 ist.

Es ist ein Suchalgorithmus. Für Strings, die länger als nur ein paar Worte sind Sie in der Regel die Anzahl der Tests schneiden können Sie in der DOM um einen Faktor von 10 ausführen müssen

Answer 8

Versuchen Sie folgendes:

Link Eine

Update:

Wenn Sie die proprietäre Verwendung {word-wrap: break-word;}, wird IE einen Zeilenumbruch erzwingen. Moderne Browser könnte die Standard haben. {Überlauf: sichtbar;}, und sie würden ohne den Ausbau der Behälter richtig, Überlauf

Answer 9

Nein, es ist nicht einfach. Ich hatte vor elbe Jahr zu tun und fand heraus, dass auch Internet Explorer (ab Version 6), Opera und Safari kann es tun, aber nicht Firefox. So kann leider nur Hacks speichern Sie

Answer 10

dojox.html.ellipsis

Answer 11

Mit Opera:

-o-text-overflow:ellipsis;

Answer 12

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

Answer 13

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.