Troncare stringhe lunghe con CSS: fattibile ancora?

https://stackoverflow.com/questions/802175

03-07-2019
|

Domanda

Esiste un buon modo per troncare il testo con HTML e CSS semplici, in modo che i contenuti dinamici possano adattarsi a un layout a larghezza e altezza fissa?

Ho troncato il lato server in base alla larghezza logica (ovvero un numero di caratteri indovinato), ma poiché una 'w' è più larga di una 'i' tende a non essere ottimale e mi richiede anche di ri-indovinare (e continuare a modificare) il numero di caratteri per ogni larghezza fissa. Idealmente il troncamento dovrebbe avvenire nel browser, che conosce la larghezza fisica del testo renderizzato.

Ho scoperto che IE ha una proprietà text-overflow: ellipsis 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 vari soluzioni alternative in base a overflow: nascosto , ma o non visualizzano i puntini di sospensione (voglio che l'utente sappia che il contenuto è stato troncato) o che lo visualizzano continuamente (anche se il contenuto non è stato troncato).

Qualcuno ha un buon modo per adattare il testo dinamico in un layout fisso, o il troncamento sul lato server per larghezza logica è buono come sto andando per ora?

Soluzione

Aggiornamento: overflow del testo: puntini di sospensione è ora supportato a partire da Firefox 7 (rilasciato il 27 settembre 2011). Sìì! La mia risposta originale segue un record storico.

Justin Maxwell ha una soluzione CSS cross-browser. Viene fornito con il rovescio della medaglia tuttavia di non consentire la selezione del testo in Firefox. Dai un'occhiata a il suo post ospite sul blog di Matt Snider per i dettagli completi su come funziona.

Nota che questa tecnica impedisce anche di aggiornare il contenuto del nodo in JavaScript utilizzando la proprietà innerHTML in Firefox. Vedi 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 Post di Matt Snider per una spiegazione di come funziona .

Altri suggerimenti

Marzo 2014: troncamento di stringhe lunghe con CSS: una nuova risposta incentrata sul supporto del browser

Demo su http://jsbin.com/leyukama/1/ (utilizzo 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: è sinonimo della proprietà CSS text-overflow, ma le versioni di IE da 6 a 11 supportano già la proprietà CSS text-overflow.

Testato correttamente (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 amp; Firefox 6.0 (overflow del testo non supportato).

Sarebbero necessari ulteriori test su un browser Web Mac OS.

Nota: potresti voler mostrare una descrizione del mouse al passaggio del mouse quando viene applicato un puntino di sospensione, questo può essere fatto tramite javascript, vedi queste domande: HTML ellissi di overflow del testo e HTML - come posso mostrare il tooltip SOLO quando i puntini di sospensione sono attivati ??

Risorse:

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 ha implementato text-overflow: puntini di sospensione e text-overflow: " string " . La versione finale è prevista per il 27/09/2011.

Un'altra soluzione al problema potrebbe essere la seguente serie di regole CSS:

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

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

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

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

Per riferimento, ecco un link al " bug " tracking overflow del testo: supporto dei puntini di sospensione in Firefox . Sembra che Firefox sia l'unico browser rimasto a non supportare una soluzione CSS nativa.

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow