Overflow del testo: i puntini di sospensione sono considerati dannosi

Ripubblicato da Platone

Seguaci: 0

Esistono alcuni casi d'uso legittimi per questa tecnica. Ad esempio, potresti avere una tabella con titoli e descrizioni. Per preservare più spazio per il titolo, limiti la descrizione a una riga su finestre piccole a una riga e ripeti la descrizione nella pagina dei dettagli per questo elemento.

Tuttavia, lo vedo spesso utilizzato su elementi come pulsanti o persino etichette di moduli per farli sembrare più belli (?) o quando li allineo verticalmente. Ma una volta modificata la finestra o ridimensionato il testo, la fine del testo scompare.

Penso che "... se usato in determinate situazioni" appartenga a questo, ma sicuramente rende il titolo del post del blog migliore senza di esso. Come dice Eric, ci sono casi d'uso legittimi per il troncamento del testo. Forse solo pochi, ma comunque legittimi.

L'obiettivo finale è prevenire la "perdita" di dati, qualcosa questo può certamente accadere nei CSS. Il testo che trabocca inavvertitamente un contenitore viene perso nel senso che semplicemente non è lì. E se quel testo semplicemente non c'è, gli utenti lo mancheranno, anche se è l'invito all'azione migliore e più ben congegnato mai pubblicato sul web.

Eric fa notare che non c'è modo di troncare il testo text-overflow: ellipsis visibile. Una volta che è andato, è andato (anche se gli screen reader sembrano annunciarlo). Sono praticamente dati persi. Potresti essere d'accordo con quello. Va bene finché sai cosa sta succedendo ed è previsto.

Ma ecco cosa dice Eric che mi ha fatto venire voglia di condividere questo:

Non vincolare il contenuto per adattarsi al tuo design, rendi il tuo CSS flessibile per gestire parole più lunghe con grazia.

Ancora tu forza vogliono conformare il contenuto al design. Ma probabilmente direi, come Eric, che il il design dovrebbe adattarsi al contenuto piuttosto che il contrario. Ho difficoltà a ricordare qualsiasi situazione in cui il testo su una pagina non è importante o senza scopo nella misura in cui sarebbe bello tagliare se in qualsiasi punto arbitrario determinato da una proprietà CSS. Forse un archivio di post del blog in cui ogni post mostra un estratto del contenuto del post prima di troncare, ma non è esattamente un caso d'uso per text-overflow: ellipse.

CSS ha gli strumenti per creare un design flessibile che tenga conto di diverse lunghezze di testo. Quindi forse peccare dalla parte di scrivendo CSS difensivo… CSS che anticipa i problemi e sa come gestire con grazia diversi scenari di contenuto. text-overflow: ellipsis potrebbe far parte del tuo arsenale CSS per questo. Ma potrebbe anche buttare fuori il bambino con l'acqua sporca. Vale la pena chiedersi se la perdita di quei dati valga il costo di ciò che quel contenuto dovrebbe fare prima di dargli un taglio di capelli.

Mentre stiamo parlando di troncare il testo...

Link il 1 ottobre 2021