Troncare stringhe lunghe con CSS: ancora fattibile?

Esiste un buon modo per troncare il testo con HTML e CSS semplici, in modo che il contenuto dinamico possa adattarsi a un layout a larghezza e altezza fisse?

Ho troncato lato server in base alla larghezza logica (ovvero un numero di caratteri indovinato alla cieca), ma poiché una 'w' è più larga di una 'i' questo tende ad essere subottimale e richiede anche di indovinare ( e continua a modificare) il numero di caratteri per ogni larghezza fissa. Idealmente il troncamento avverrebbe nel browser, che conosce la larghezza fisica del testo renderizzato.

Ho scoperto che IE ha una text-overflow: ellipsisproprietà che fa esattamente quello che voglio, ma ho bisogno che sia cross-browser. Questa proprietà sembra essere (un po '?) Standard ma non è supportata da Firefox. Ho trovato varie soluzioni alternative basate su overflow: hidden, ma non visualizzano i puntini di sospensione (voglio che l'utente sappia che il contenuto è stato troncato) o lo visualizzano sempre (anche se il contenuto non è stato troncato).

Qualcuno ha un buon modo per adattare il testo dinamico in un layout fisso o il troncamento lato server per larghezza logica è buono come ho intenzione di ottenere per ora?

Aggiornamento: text-overflow: ellipsisè ora supportato a partire da Firefox 7 (rilasciato il 27 settembre 2011). Sìì! La mia risposta originale segue come un record storico.

Justin Maxwell ha una soluzione CSS cross browser. Tuttavia, ha lo svantaggio di non consentire la selezione del testo in Firefox. Controlla il suo post sul blog di Matt Snider per tutti i dettagli su come funziona.

Nota che questa tecnica impedisce anche l'aggiornamento del contenuto del nodo in JavaScript utilizzando la innerHTMLproprietà in Firefox. Vedere la fine di questo post per una soluzione alternativa.

CSS

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

ellipsis.xml contenuto del file

<?xml version="1.0"?>
<bindings
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
    <binding id="ellipsis">
        <content>
            <xul:window>
                <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
            </xul:window>
        </content>
    </binding>
</bindings>

Aggiornamento del contenuto del nodo

Per aggiornare il contenuto di un nodo in modo che funzioni in Firefox, utilizzare quanto segue:

var replaceEllipsis(node, content) {
    node.innerHTML = content;
    // use your favorite framework to detect the gecko browser
    if (YAHOO.env.ua.gecko) {
        var pnode = node.parentNode,
            newNode = node.cloneNode(true);

        pnode.replaceChild(newNode, node);
    }
};

Vedi il post di Matt Snider per una spiegazione di come funziona .

2014 marzo: Troncamento di stringhe lunghe con CSS: una nuova risposta incentrata sul supporto del browser

Demo su http://jsbin.com/leyukama/1/ (io uso jsbin perché supporta la vecchia versione di IE).

<style type="text/css">
    span {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;     /** IE6+, Firefox 7+, Opera 11+, Chrome, Safari **/
        -o-text-overflow: ellipsis;  /** Opera 9 & 10 **/
        width: 370px; /* note that this width will have to be smaller to see the effect */
    }
</style>

<span>Some very long text that should be cut off at some point coz it's a bit too long and the text overflow ellipsis feature is used</span>

La proprietà CSS -ms-text-overflow non è necessaria: è un sinonimo della proprietà CSS text-overflow, ma le versioni di IE dalla 6 alla 11 supportano già la proprietà CSS text-overflow.

Testato con successo (su Browserstack.com) su sistema operativo Windows, per browser web:

• Da IE6 a IE11
• Opera 10.6, Opera 11.1, Opera 15.0, Opera 20.0
• Chrome 14, Chrome 20, Chrome 25
• Safari 4.0, Safari 5.0, Safari 5.1
• Firefox 7.0, Firefox 15

Firefox: come sottolineato da Simon Lieschke (in un'altra risposta), Firefox supporta solo la proprietà CSS di overflow del testo da Firefox 7 in poi (rilasciato il 27 settembre 2011).

Ho ricontrollato questo comportamento su Firefox 3.0 e Firefox 6.0 (l'overflow del testo non è supportato).

Sarebbero necessari ulteriori test su browser Web Mac OS.

Nota: potresti voler mostrare un suggerimento al passaggio del mouse quando vengono applicati i puntini di sospensione, questo può essere fatto tramite javascript, vedi queste domande: HTML text-overflow ellipsis detection and HTML - how can I show tooltip SOLO quando i puntini di sospensione sono attivati

Risorse:

• https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow#Browser_compatibility
• http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://stackoverflow.com/a/1101702/759452
• http://www.browsersupport.net/CSS/text-overflow
• http://caniuse.com/text-overflow
• http://msdn.microsoft.com/en-us/library/ie/ms531174(v=vs.85).aspx
• http://hacks.mozilla.org/2011/09/whats-new-for-web-developers-in-firefox-7/

Se stai bene con una soluzione JavaScript, c'è un plug-in jQuery per farlo in modo cross-browser - vedi http://azgtech.wordpress.com/2009/07/26/text-overflow-ellipsis-for -firefox-via-jquery /

OK, Firefox 7 è stato implementato text-overflow: ellipsiscosì come text-overflow: "string". Il rilascio finale è previsto per il 27/09/2011.

Un'altra soluzione al problema potrebbe essere il seguente insieme di regole CSS:

.ellipsis{
 white-space:nowrap;
 overflow:hidden;
}

.ellipsis:after{
  content:'...';
}

L'unico inconveniente con il CSS di cui sopra è che aggiungerebbe "..." indipendentemente dal fatto che il testo trabocchi o meno dal contenitore. Tuttavia, se hai un caso in cui hai un sacco di elementi e sei sicuro che il contenuto traboccherà, questo sarebbe un insieme di regole più semplice.

I miei due centesimi. Tanto di cappello alla tecnica originale di Justin Maxwell