Kata putus - Trik CSS

Anonim

The word-breakharta di CSS boleh digunakan untuk berubah apabila rehat talian patut berlaku. Biasanya, jeda baris dalam teks hanya dapat terjadi di ruang tertentu, seperti ketika ada ruang atau tanda hubung.

Sebagai contoh di bawah, kita boleh membuat word-breakhuruf antara:

p ( word-break: break-all; )

Sekiranya kita menetapkan lebar teks menjadi satu em, kata itu akan dipecah setiap huruf:

Lihat teks Pen Seting secara menegak dengan kata putus oleh CSS-Tricks (@ css-tricks) di CodePen.

Nilai ini sering digunakan di tempat dengan kandungan yang dihasilkan pengguna sehingga rentetan panjang tidak berisiko melanggar tata letak. Salah satu contoh yang sangat biasa adalah salinan panjang dan URL yang ditampal. Sekiranya URL itu tidak mempunyai tanda hubung, URL boleh melampaui kotak induk dan kelihatan buruk atau buruk, menyebabkan masalah susun atur.

Lihat pautan Pen Fixing dengan kata putus oleh CSS-Tricks (@ css-tricks) di CodePen.

Nilai

  • normal: gunakan peraturan lalai untuk pemecahan kata.
  • break-all: sebarang perkataan / huruf boleh masuk ke baris seterusnya.
  • keep-all: untuk kata-kata teks Cina, Jepun dan Korea tidak rosak. Jika tidak ini sama seperti normal.

Harta ini juga sering digunakan bersamaan dengan harta tanda hubung sehingga apabila berlaku kerosakan, tanda hubung akan dimasukkan, seperti yang terdapat dalam buku.

Penggunaan penuh, dengan awalan vendor yang diperlukan, 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 sifat ini pada pemilih universal boleh berguna jika anda mempunyai laman web dengan banyak kandungan yang dihasilkan pengguna. Walaupun peringatan yang adil, ia boleh dilihat pelik pada tajuk dan teks pra-format (

).

Berkaitan


    

  • limpahan-bungkus
    • 

  • tanda hubung
    • 

  • ruang putih
    • 

  • Mengendalikan Perkataan dan URL Panjang
    • 



Sokongan Penyemak Imbas


Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.


Desktop


 

 

 Chrome Firefox IE Hujung Safari 


 

 

 

 23 49 11 18 6.1 


 

 



Mudah Alih / Tablet


 

 

 Android Chrome Android Firefox Android Safari iOS 


 

 

 

 88 85 4.4 7.0-7.1 


 

 



Safari dan iOS menyokong break-allnilai tetapi tidakkeep-all