Come posso imitare l'overflow del testo: puntini di sospensione in Firefox?

Question

Ho del testo dinamico contenuto in un div impostato su qualunque cosa l'utente inserisca in un campo di testo. Se il testo non si adatta al div, in questo momento viene semplicemente tagliato al bordo e tutto il testo che si estende oltre il bordo non è visibile. Vorrei troncare il testo in modo che si adatti all'interno della scatola e abbia un'ellissi (...) aggiunto alla fine. Ad esempio:

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

Ovviamente nell'esempio è facile perché il tag di codice usa un carattere a larghezza fissa, quindi è semplice come contare i caratteri. Ho un carattere a larghezza variabile, quindi se inseriscono " WWWWWWWWWWW " riempirà con un numero di caratteri molto inferiore rispetto a " ................ " voluto.

Qual è il modo migliore per farlo? Ho trovato una potenziale soluzione per trovare semplicemente la larghezza effettiva dei pixel del testo qui: http://www.codingforums.com/archive/index.php/t-100367.html

Ma anche con un metodo del genere, è un po 'imbarazzante implementare i puntini di sospensione. Quindi, se ha 20 caratteri e trovo che non vada bene, dovrei troncare a 19, aggiungere i puntini di sospensione e quindi verificare se si adatta di nuovo. Quindi tronca a 18 (più i puntini di sospensione) e riprova. E di nuovo. E ancora ... fino a quando non si adatta. C'è un modo migliore?

EDIT: ho deciso in base alle risposte che il mio approccio originale è il migliore, tranne che ho cercato di migliorare la soluzione nel link sopra, non creando un elemento td separato semplicemente per la misurazione, che sembra un hack.

Ecco il mio codice:

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

E stili:

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

e il javascript che taglia e aggiunge i puntini di sospensione:

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

La " riga1 " e "riga2" i div vengono passati alla funzione. Funziona in caso di input di una sola parola come " WWWWWWWWWWWWWWWWW " ma non funziona con un input di più parole "WWWWW WWWWW WWWWW" perché aggiunge solo le interruzioni di riga e misura il testo come la larghezza di "WWWWW".

Esiste un modo per risolvere il problema senza ricorrere alla copia del testo in un elemento di misurazione nascosto? Qualche modo per impostare lo stile dei div della linea in modo che non avvolgano il testo?

Answer 1

  

Qualche modo per impostare lo stile dei div della linea in modo che non racchiudano il testo?

Ecco il white-space: nowrap per. Sì, funziona anche con browser antichi.

Answer 2

Questo problema deve funzionare anche su Firefox.

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

Se stai usando jQuery, c'è un ottimo plugin che uso.

In alternativa, [questo esempio] (404 NON TROVATO!) sembra funzionare su più browser.

Per qualsiasi domanda, rispondimi nei commenti!

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

Answer 4

La nuova versione di CSS (CSS3) dovrebbe includere text-overflow: ellipsis , che fa questo per te. Attualmente funziona con IE versione 6 e successive, Safari e Chrome. Non è supportato da Firefox, quindi questa non è ancora una risposta utile, ma vale la pena tenere presente che il vero modo migliore sarà, eventualmente, lasciare che CSS lo gestisca.

Bozza di specifica CSS3: http: //www.w3.org/TR/2001/WD-css3-text-20010517/#text-overflow-props

Browser supportati: http://www.quirksmode.org/css/contents.html (scorri verso il basso fino a " overflow del testo " nella parte inferiore)

Answer 5

Molto semplicemente, no, non c'è modo migliore senza ricorrere agli hack.

Ad esempio, puoi utilizzare una posizione: intervallo assoluto per posizionare il tuo " ... " sopra il contenuto effettivo, con overflow: nascosto nel contenitore e nascondi l'intervallo extra solo se il contenuto si adatta al contenitore. Ciò ti consentirebbe di eseguire il codice di troncamento solo una volta.

Personalmente, eseguivo il calcolo della larghezza dei pixel un paio di volte in più. Impostare il testo e leggere la larghezza è un'operazione veloce, quindi non dovrebbe essere evidente.

Answer 6

Usa overflow del testo: puntini di sospensione . Non è solo IE ... La maggior parte dei principali browser può farlo.
Ma se non puoi qui è un plugin jQuery per questo.

Answer 7

Per rispondere solo a uno dei punti sollevati:

  

Quindi se sono 20 caratteri e lo trovo   che non va bene, dovrei   troncare a 19, aggiungere i puntini di sospensione e   quindi controlla se si adatta di nuovo. Poi   tronca a 18 (più i puntini di sospensione) e   riprova. E di nuovo. E   di nuovo ... fino a quando non si adatta. C'è un   modo migliore?

Un modo molto più veloce di trovare la lunghezza corretta è tagliare la corda a metà, testarla per vedere se si adatta. In tal caso: aggiungi di nuovo un quarto della lunghezza originale e, se non si taglia un quarto di distanza, verifica che sia adatto. Ripeti in modo ricorsivo con 1/8, 1/16, 1/32, ... della lunghezza originale, fino a quando questo valore di aggiunta / sottrazione è inferiore a 1.

È un algoritmo di ricerca: per stringhe più lunghe di poche parole, in genere è possibile ridurre di 10 il numero di test necessari per eseguire nel DOM

Answer 8

Prova questo:

Link One

Aggiornamento:

Se si utilizza la proprietà {word-wrap: break-word;}, IE forzerà un'interruzione di riga. I browser moderni potrebbero avere il valore predefinito {overflow: visible;} e traboccerebbero correttamente, senza espandere il contenitore.

Answer 9

No, non è un compito semplice. Ho dovuto fare la stessa cosa un anno fa e ho scoperto che anche Internet Explorer (dalla versione 6), Opera e Safari possono farlo, ma senza Firefox. Mi dispiace, solo gli hack possono salvarti

Answer 10

prova dojox.html.ellipsis

Answer 11

Con Opera:

-o-text-overflow:ellipsis;

Answer 12

Ho modificato this.value = strings.join ('') in this.value = strings.join ('') da Binyamin risposta, e ha funzionato bene per me!

Answer 13

Informazioni su Firefox 4.0 e la overflow del testo: ellissi , ancora non implementata, proprietà CSS:

Questo link offre una soluzione parziale al problema.

Produce un risultato simile a overflow del testo: puntini di sospensione usando solo css.