Bagaimana cara menghentikan teks dari mengambil lebih dari 1 baris?

332

Apakah ada pembungkus kata atau atribut lain yang menghentikan teks dari pembungkus? Saya memiliki ketinggian, dan overflow:hidden, dan teks masih pecah.

Perlu bekerja di semua browser, sebelum CSS3.

— kayu isher
sumber

632

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

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

Luaskan cuplikan

Catatan: ini hanya berfungsi pada elemen blok. Jika Anda perlu melakukan ini pada tabel sel (misalnya), Anda perlu meletakkan div di dalam sel tabel karena sel tabel menampilkan sel tabel-tabel tidak menghalangi.

Pada CSS3, ini didukung untuk sel tabel juga.

— cletus
sumber

12

ruang putih! Itulah yang saya cari ... 1.000 terima kasih ... ini tidak mungkin untuk google!

2

Ada juga atribut yaitu proprietary yang disebut word-wrap (IIRC) ... IE bodoh.

— garrow

21

Juga pertimbangkan "text-overflow: ellipsis;" Ia menambahkan ... di akhir teks Anda jika melampaui batas lebar penampung Anda

— Drew Landgrave

1

Saya pikir komentar "ini hanya berfungsi pada elemen blok" benar. Jika Anda mencoba ini di jangkar, paragraf, pos, dll, ini tidak berfungsi. Anda perlu melakukan sesuatu sepertip.oneline { white-space:nowrap; overflow:hidden; display:block;}

— Alex Angelico

Waspadalah terhadap persembunyian yang meluap; itu berarti bisnis.

— David A. Gray

57

Anda dapat menggunakannya CSS white-space Propertyuntuk mencapai ini.

white-space: nowrap

— Robert C. Barth
sumber

36

Menggunakan elipsis akan menambah ... pada akhirnya.

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

— Vivek
sumber

4

Terkadang menggunakan  alih-alih spasi akan bekerja. Jelas itu memiliki kelemahan.

— grossvogel
sumber

Sayangnya, saya tidak bisa melakukannya dalam keadaan ini

2

Supaya jelas, ini berfungsi baik dengan paragraf dan header dll. Anda hanya perlu menentukan display: block.

Misalnya:

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

(maafkan gaya inline)

— Duncan Jones
sumber