Come impedire al testo di occupare più di 1 riga?

332

Esiste un ritorno a capo automatico o altri attributi che impediscono il ritorno a capo del testo? Ho un'altezza e overflow:hidden, e il testo si rompe ancora.

Deve funzionare in tutti i browser, prima di CSS3.

— Isherwood
fonte

632

div {
  white-space: nowrap;
  overflow: hidden;
}

<div>test that doesn't wrap</div>

Espandi frammento

Nota: funziona solo su elementi a blocchi. Se è necessario eseguire questa operazione su celle di tabella (ad esempio), è necessario inserire un div all'interno della cella di tabella poiché le celle di tabella presentano una cella di tabella non bloccata.

A partire da CSS3, questo è supportato anche per le celle di tabella.

— Cletus
fonte

12

white-space! Questo è quello che stavo cercando ... 1.000 grazie ... è impossibile per Google!

2

C'è anche un attributo ie proprietario chiamato word-wrap (IIRC) ... stupido IE.

— Garrow

21

Considera anche "text-overflow: ellipsis;" Aggiunge il ... alla fine del tuo testo se va oltre i limiti della larghezza del tuo contenitore

— Drew Landgrave

1

Penso che il commento "funziona solo su elementi a blocchi" sia giusto. Se lo provi in un'ancora, in un paragrafo, in un'intestazione, ecc., Ciò non funziona. Devi fare qualcosa del generep.oneline { white-space:nowrap; overflow:hidden; display:block;}

— Alex Angelico,

Attenzione a nascondere il trabocco; significa affari.

— David A. Gray,

57

È possibile utilizzare CSS white-space Propertyper raggiungere questo obiettivo.

white-space: nowrap

— Robert C. Barth
fonte

36

L'uso dei puntini di sospensione aggiungerà il ... alla fine.

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>

— Vivek
fonte

4

A volte l'utilizzo al  posto degli spazi funzionerà. Chiaramente ha degli svantaggi, però.

— grossvogel
fonte

Sfortunatamente, non posso farlo in questa circostanza

2

Solo per essere cristallino, questo funziona bene con paragrafi e intestazioni ecc. Devi solo specificare display: block.

Per esempio:

<h5 style="display: block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden">
  This is a really long title, but it won't exceed the parent width
</h5>

(perdona gli stili in linea)

— Duncan Jones
fonte