css troppo pieno - solo 1 riga di testo

Question

ho div con il seguente stile css:

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

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

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

Forse se aggiungo altezza uguale al carattere, dovrebbe funzionare e non causare problemi nei vari browser?

Come posso farlo?

Answer 1

Se si desidera limitare a una riga, utilizzare white-space: nowrap; sul div.

Answer 2

line-height:335px; 

si può provare questo ...

Answer 3

Se si vuole indicare che c'è ancora più contenuti disponibili in questo div, si può probabilmente si desidera mostrare il "puntini di sospensione":

text-overflow: ellipsis; 

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

Inoltre, assicurati di effettuare il checkout this thread per gestirlo in Firefox.

Answer 4

ho avuto lo stesso problema e ho risolto utilizzando:

display: inline-block; 

sulla div in questione.

Answer 5

È possibile utilizzare questo codice CSS:

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

Il text-overflow di proprietà in offerte CSS situazioni in cui il testo è troncato quando trabocca di dialogo dell'elemento. Può essere ritagliato (ovvero, interrotto, nascosto), visualizzare un ellisse ('...', Valore intervallo Unicode U + 2026).

noti che text-overflow di si verifica solo quando la proprietà di overflow del contenitore ha il valore nascosto, scorrimento o auto e white-space: nowrap;.

troppopieno testo può avvenire solo su blocco o inline-block elementi a livello, perché l'elemento deve avere una larghezza per essere overflow ed. L'overflow si verifica nella direzione determinata dalla proprietà direction o dagli attributi correlati.