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

631

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

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

Rozwiń fragment kodu

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

57

Możesz użyć tego CSS white-space Propertydo osiągnięcia.

white-space: nowrap

— Robert C. Barth
źródło

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