Tentativo di trasformare il titolo lungo in ellissi sul responsive design

Sto progettando un'applicazione web reattiva e vorrei racchiudere un lungo testo nel titolo con un'ellissi. Come posso fare questo? E 'una pagina reattivo (non a dimensione fissa) ...Tentativo di trasformare il titolo lungo in ellissi sul responsive design

Ecco un esempio

Example of what I'd like to achieve

chiunque può aiutare?

Edit:

ho aggiunto un max-width e un trabocco puntini di sospensione come questo:

max-width: 200px; 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis;

Ma questo non funziona per me, perché la chiave qui è reattività. Non voglio indirizzare la larghezza massima del titolo in modo specifico per i browser mobili iOS, voglio ingrandire o ridurre la larghezza massima su tutti gli smartphone. Eventuali suggerimenti?

fonte

2013-06-08 Jody Heavener

Ho una domanda relativa ai puntini di sospensione nel cellulare. In che modo l'utente dovrebbe conoscere l'intero titolo "Il mio lungo titolo del progetto che si romperà" nel layout mobile dove vengono introdotti i puntini di sospensione? –

Questo è un buon punto. Nel 2013 non pensavo a quella parte dell'UX. Suppongo che oggi userei un approccio alternativo, o forse se tu fossi avventuroso potresti animare il titolo da sinistra a destra. –

Chi sapeva che è possibile gestirlo in CSS semplice? Sono rimasto sorpreso, ma controlla la proprietà text-overflow. Uno dei possibili valori è l'ellissi! https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Vedere il violino: http://jsfiddle.net/PdRqB/

È necessario aggiungere tre proprietà al titolo:

.title { 
    overflow: hidden; /* to hide anything that doesn't fit in the containing element. */ 
    white-space: nowrap; /* to make sure the line doesn't break when it is longer than the containing div. */ 
    text-overflow: ellipsis; /* to do what you want. */ 
}

Una parte interessante è, senza mezzi di query necessario. È già reattivo (prova a ridimensionare il pannello nel violino).

Aggiornamento:

appena visto l'aggiornamento ... larghezza tuo dell'elemento che contiene può essere impostata su una percentuale, anche il 100%. Quindi, overflow: hidden e white-space: nowrap possono fare la loro magia sull'elemento titolo figlio.

fonte

2013-06-08 04:26:38 Tayler

Sfortunatamente questo non funziona per me perché la barra del titolo deve bilanciare due pulsanti, e una larghezza massima deve essere definita - vedi la mia modifica alla domanda sopra dove il mio problema continua. Ho provato la tua risposta, tuttavia, ma poiché non c'è una larghezza massima definita, il titolo non sa quando tagliare, in modo che si estenda oltre la pagina. –

Ah, capisco. Grazie mille! –

Prego. Sono contento che ha funzionato. – Tayler

Tentativo di trasformare il titolo lungo in ellissi sul responsive design

risposta

Problemi correlati