Kata-istirahat - Trik CSS

Anonim

The word-breakproperti di CSS dapat digunakan untuk mengubah ketika jeda baris harus terjadi. Biasanya, jeda baris dalam teks hanya dapat muncul di spasi tertentu, seperti saat ada spasi atau tanda hubung.

Pada contoh di bawah ini, kita dapat membuat word-breakhuruf antara:

p ( word-break: break-all; )

Jika kita kemudian mengatur lebar teks menjadi satu em, kata tersebut akan dipisahkan oleh setiap huruf:

Lihat teks Pengaturan Pena secara vertikal dengan pemutusan kata oleh CSS-Tricks (@ css-trick) di CodePen.

Nilai ini sering digunakan di tempat-tempat dengan konten buatan pengguna sehingga string panjang tidak berisiko merusak tata letak. Salah satu contoh yang sangat umum adalah salinan panjang dan URL yang ditempel. Jika URL tersebut tidak memiliki tanda hubung, itu dapat melampaui kotak induk dan terlihat buruk atau lebih buruk, menyebabkan masalah tata letak.

Lihat tautan Pen Fixing with word-break by CSS-Tricks (@ css-trick) di CodePen.

Nilai

  • normal: gunakan aturan default untuk pemecah kata.
  • break-all: kata / huruf apa pun dapat masuk ke baris berikutnya.
  • keep-all: untuk kata teks China, Jepang dan Korea tidak rusak. Kalau tidak, ini sama dengan normal.

Properti ini juga sering digunakan bersama dengan properti tanda hubung sehingga saat terjadi pemutusan tanda hubung dimasukkan, sesuai standar di buku.

Penggunaan penuh, dengan prefiks vendor yang dibutuhkan, adalah:

 -ms-word-break: break-all; word-break: break-all; /* Non standard for WebKit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;

Menggunakan properti ini pada pemilih universal dapat berguna jika Anda memiliki situs dengan banyak konten buatan pengguna. Meskipun peringatan yang adil, ini bisa terlihat aneh pada judul dan teks yang telah diformat sebelumnya (

).

Terkait


    

  • overflow-wrap
    • 

  • tanda hubung
    • 

  • ruang putih
    • 

  • Menangani Kata-kata Panjang dan URL
    • 



Dukungan Browser


Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.


Desktop


 

 

 Chrome Firefox YAITU Tepi Safari 


 

 

 

 23 49 11 18 6.1 


 

 



Ponsel / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 4.4 7.0-7.1 


 

 



Safari dan iOS mendukung break-allnilai tersebut tetapi tidakkeep-all