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.

html css text word-wrap kayu isher
sumber

Jawaban:

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 &nbsp;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