Bagaimana mencegah jeda baris dalam item daftar menggunakan CSS

513

Saya mencoba meletakkan tautan yang disebut Kirim resume di menu menggunakan litag. Karena spasi putih antara dua kata itu membungkus menjadi dua baris. Bagaimana mencegah pembungkus ini dengan CSS?

html css word-wrap Rajasekar
sumber

Jawaban:

969

Gunakan white-space: nowrap;[1] [2] atau berikan tautan lebih banyak ruang dengan mengatur lilebar ke nilai yang lebih besar.

[1] § 3. Ruang Putih dan Pembungkus: properti ruang-putih - W3 CSS Text Module Level 3
[2] ruang-putih - CSS: Cascading Style Sheets | MDN

n1313
sumber
41
Anda harus mereferensikan W3C alih-alih situs web w3schools yang ditakuti dan sering salah. w3.org/TR/css3-text/#white-space0
Sebastien Martin
53
Atau hanya referensi pengembang Jaringan Pengembang
Mozilla.mozilla.org/en-US/docs/CSS/CSS_Reference
4
Saya mencegah jeda baris dalam item li menggunakan display: inline;. Mungkin ini juga akan membantu orang lain dengan masalah yang sama.
Penting untuk berhati-hati dengan tampilan: sebaris karena dapat memiliki efek samping. white-space: nowrap; hanya memiliki satu efek.
Crispen Smith
Dalam hal ini terjadi overflow teks. bagaimana mencegahnya?
147

Anda bisa menambahkan potongan kode kecil ini untuk menambahkan "..." yang bagus ke akhir baris jika kontennya terlalu besar agar muat pada satu baris:

li {
  overflow: hidden; 
  text-overflow: ellipsis;
  white-space: nowrap;
}
JimmyRare
sumber
Saya mencari solusi penjepitan teks, tetapi saya akan tetap menggunakan solusi ini
JorgeGarza
33

Jika Anda ingin mencapai hal ini secara selektif (yaitu: hanya ke tautan tertentu), Anda dapat menggunakan ruang tanpa putus alih-alih ruang normal:

<li>submit&nbsp;resume</li>

https://en.wikipedia.org/wiki/Non-breaking_space#Encodings

sunting: Saya mengerti bahwa ini adalah HTML, bukan CSS seperti yang diminta oleh OP, tetapi beberapa orang mungkin merasa terbantu ...

ptim
sumber
14

display: inline-block; akan mencegah jeda antara kata-kata dalam item daftar

 li {
    display: inline-block;
 }
Nadeesh Peiris
sumber
1
Jika saya mengklik jsfiddle dan menyesuaikan lebar output, item daftar terpisah memecah antara kata "daftar" dan angka, yang persis apa yang tidak diinginkan OP ...
GentlePurpleRain
4

Bootstrap 4 memiliki kelas bernama text-nowrap. Itulah yang Anda butuhkan.

Yevgeniy Afanasyev
sumber
2
Saya lebih suka menghindari merekomendasikan menggunakan Bootstrap pada tahun 2019.
Broda Noel
2
@BrodaNoel Kenapa?
Yevgeniy Afanasyev