css overflow - solo 1 riga di testo

134

Ho divcon il seguente stile CSS:

width:335px; float:left; overflow:hidden; padding-left:5px;

Quando inserisco, in quella div, una lunga riga di testo, si interrompe in una nuova riga e visualizza tutto il testo. Quello che voglio è avere solo una riga di testo che non interrompa la linea. Quando il testo è lungo, voglio che questo testo traboccante scompaia.

Stavo pensando di impostare l'altezza ma sembra essere sbagliato.

Forse se aggiungo un'altezza uguale al carattere, dovrebbe funzionare e non causare problemi in diversi browser?

Come lo posso fare?

html css overflow

— fuori campo
fonte

Puoi dimostrare il tuo problema su jsFiddle ?

— Harry Joy,

352

Se vuoi limitarlo a una riga, usa white-space: nowrap;sul div.

— Septnuits
fonte

Ma poi non mostra i puntini di sospensione se il testo supera la dimensione specificata. stackoverflow.com/questions/26342411/…

— SearchForKnowledge

Funziona alla grande. Ma ho bisogno ...se ci sono più caratteri da mostrare perché quando la lunghezza della linea è lunga e va fuori dal div scritto.

— Moshii,

Questo si comporta in modo strano se il testo nascosto contiene collegamenti ipertestuali. Se dovessi scorrere la pagina, farebbe scorrere il link nel testo nascosto sullo schermo, quando dovrebbe essere nascosto.

— Eric

76

Se vuoi indicare che ci sono ancora più contenuti disponibili in quel div, probabilmente vorrai mostrare i "puntini di sospensione":

text-overflow: ellipsis;

Questo dovrebbe essere in aggiunta a quello white-space: nowrap;suggerito da Septnuits.

Inoltre, assicurati di controllare questo thread per gestirlo in Firefox.

— Mouli
fonte

47

Credo che è necessario utilizzare text-overflow: ellipsis;con overflow: hidden;e white-space: nowrap;per farlo funzionare

— Francisco Costa

caniuse.com/#feat=text-overflow aka. si, puoi. Valuta di inserire l'intero contenuto nell'attributo title, in modo che l'utente abbia ancora accesso ad esso.

— DanMan,

miniera solo spettacoli in una riga e non popolare il DIV prima di mostrare i puntini di sospensione ... stackoverflow.com/questions/26342411/... ( jsfiddle.net/ofrj55j4/20 )

— SearchForKnowledge

43

Puoi usare questo codice CSS:

text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap;

La proprietà di overflow del testo nei CSS si occupa di situazioni in cui il testo viene troncato quando trabocca la casella dell'elemento. Può essere troncato (cioè tagliato, nascosto), visualizza un'ellissi ('...', Unicode Range Value U + 2026).

Si noti che l' overflow del testo si verifica solo quando la proprietà dell'overflow del contenitore ha il valore nascosto , scroll o auto e white-space: nowrap;.

L'overflow del testo può avvenire solo su elementi di livello block o inline block , poiché l'elemento deve avere una larghezza per poter essere overflow. L'overflow si verifica nella direzione determinata dalla proprietà direction o dagli attributi correlati.

— Gaurav Tripathi
fonte

6

il miglior codice per UX e UI è

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inherit;

— Omid Ahmadyani
fonte

0

in caso di aggiunta, per favore, se hai un testo lungo, puoi usare questo codice css qui sotto;

text-overflow: ellipsis;
overflow: visible;
white-space: nowrap;

rendere visibile l'intero testo della riga.

— Shafii Muhudi
fonte

0

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

Definisci larghezza anche per impostare l'overflow in una riga

— Jaydeep Kataria
fonte

-2

Ho avuto lo stesso problema e l'ho risolto utilizzando:

display: inline-block;

sulla divquestione.

— Dekcolnu
fonte