Troncare lunghe stringhe con i CSS: fattibile ancora?

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

Sto troncando il lato server per larghezza logica (cioè un numero di caratteri cieco), ma dal momento che una ‘w’ è più ampia di una ‘i’ questo tende ad essere subottimale, e richiede anche a me di ri-indovinare ( e continua a tweaking) il numero di caratteri per ogni larghezza fissa. Idealmente il troncamento avverrebbe nel browser, che conosce la larghezza fisica del testo renderizzato.

Ho trovato che IE ha un text-overflow: ellipsis proprietà text-overflow: ellipsis che fa esattamente quello che voglio, ma ho bisogno che questo sia cross-browser. Questa proprietà sembra essere (un po ‘?) Standard ma non è supportata da Firefox. Ho trovato varie soluzioni alternative basate overflow: hidden , ma non mostrano i puntini di sospensione (voglio che l’utente sappia che il contenuto è stato troncato) o lo mostrano 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 sul lato server per larghezza logica è buono come sto per ottenere per ora?

Aggiornamento: text-overflow: ellipsis è ora supportato 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. Arriva con lo svantaggio di non permettere che il testo sia selezionato in Firefox. Dai un’occhiata al suo post sul blog di Matt Snider per i dettagli completi su come funziona.

Nota questa tecnica impedisce anche l’aggiornamento del contenuto del nodo in JavaScript utilizzando la proprietà innerHTML 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'); }

contenuto del file ellipsis.xml

Aggiornamento del contenuto del nodo

Per aggiornare il contenuto di un nodo in un modo che funziona 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: troncare le lunghe stringhe con i CSS: una nuova risposta focalizzata sul supporto del browser

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

  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

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

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 di testo non è supportato).

Sarebbero necessari ulteriori test su un browser Web Mac OS.

Nota: potresti volere mostrare un suggerimento al passaggio del mouse quando viene applicato un puntino di sospensione, questo può essere fatto tramite javascript, vedere le domande: Rilevazione puntini di trascinamento del testo HTML e HTML – come posso visualizzare SOLO suggerimento quando si triggersno i puntini di sospensione

risorse:

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

OK, Firefox 7 ha implementato l’ text-overflow: ellipsis e text-overflow: "string" . La versione finale è prevista per il 2011-09-27.

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 di cui sopra è che aggiungerebbe “…” indipendentemente dal fatto che il testo superi il contenitore o meno. 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. Un saluto alla tecnica originale di Justin Maxwell

Per riferimento, ecco un collegamento al ” overflow ” del testo di tracciamento “bug” : supporto ellipsis in Firefox . Sembra che Firefox sia l’unico browser principale a non supportare una soluzione CSS nativa.

 .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }