Jak zatrzymać zajmowanie tekstu przez więcej niż 1 linię?

332

Czy istnieje zawijanie słów lub jakikolwiek inny atrybut, który powstrzymuje zawijanie tekstu? Mam wysokość overflow:hiddeni tekst wciąż się psuje.

Musi działać we wszystkich przeglądarkach, przed CSS3.

Isherwood
źródło

Odpowiedzi:

631

div {
  white-space: nowrap;
  overflow: hidden;
}
<div>test that doesn't wrap</div>

Uwaga: działa to tylko w przypadku elementów blokowych. Jeśli musisz to zrobić w komórkach tabeli (na przykład), musisz wstawić div do komórki tabeli, ponieważ komórki tabeli mają wyświetlaną komórkę tabeli, a nie blok.

Począwszy od CSS3, jest to obsługiwane również dla komórek tabeli.

Cletus
źródło
12
Biała przestrzeń! Właśnie tego szukałem ... 1000 dzięki ... nie można wyszukiwać w Google!
2
Jest też zastrzeżony, tzn. Atrybut o nazwie zawijanie wyrazów (IIRC) ... głupi IE.
garrow
21
Weź również pod uwagę „przepełnienie tekstu: elipsa;” Dodaje ... na końcu tekstu, jeśli wykracza poza granice kontenera
Drew Landgrave
1
Myślę, że komentarz „to działa tylko na elementach blokowych” jest słuszny. Jeśli spróbujesz tego w zakotwiczeniu, akapicie, nagłówku itp., To nie zadziała. Musisz zrobić coś takiegop.oneline { white-space:nowrap; overflow:hidden; display:block;}
Alex Angelico
Uważaj na ukrywanie przelewu; to oznacza biznes.
David A. Gray
36

Użycie elipsy doda na końcu ...

   <style type="text/css">
    div {
      white-space: nowrap;
      overflow: hidden;
text-overflow: ellipsis;
    }
    </style>
Vivek
źródło
4

Czasami użycie &nbsp;zamiast spacji będzie działać. Oczywiście ma to jednak wady.

Grossvogel
źródło
Niestety nie mogę tego zrobić w takich okolicznościach
2

Aby być krystalicznie czystym, działa to dobrze z akapitami i nagłówkami itp. Musisz tylko określić display: block .

Na przykład:

<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>

(wybacz style wbudowane)

Duncan Jones
źródło