Kelime arası - CSS Hileleri

Anonim

CSS'deki word-breaközellik, satır kesmelerinin ne zaman gerçekleşmesi gerektiğini değiştirmek için kullanılabilir. Normalde, metindeki satır kesmeleri, boşluk veya kısa çizgi olduğu gibi yalnızca belirli boşluklarda olabilir.

Aşağıdaki örnekte word-breakbunun yerine harflerin arasını yapabiliriz :

p ( word-break: break-all; )

Daha sonra metnin genişliğini bir olarak ayarlarsak, emkelime her harfe göre bölünür:

CodePen'de CSS-Tricks (@ css-tricks) ile sözcük ayırma ile Kalem Ayarı metnine dikey olarak bakın.

Bu değer, genellikle kullanıcı tarafından oluşturulan içeriğin bulunduğu yerlerde kullanılır, böylece uzun dizeler düzeni bozma riskini ortadan kaldırır. Çok yaygın bir örnek, uzun bir kopya ve yapıştırılan URL'dir. Bu URL'de tire işareti yoksa, ana kutunun ötesine uzanabilir ve kötü veya daha kötü görünebilir, düzen sorunlarına neden olabilir.

CodePen'de CSS-Tricks (@ css-tricks) ile kelime sonu içeren Kalem Sabitleme bağlantılarına bakın.

Değerler

  • normal: sözcük kırmak için varsayılan kuralları kullanın.
  • break-all: herhangi bir kelime / harf bir sonraki satıra geçebilir.
  • keep-all: Çince, Japonca ve Korece metin sözcükleri bozulmaz. Aksi takdirde bu aynıdır normal.

Bu özellik aynı zamanda genellikle tire özelliği ile birlikte kullanılır, böylelikle kitaplardaki standarda göre kopmalar meydana geldiğinde bir hipen eklenir.

Gerekli satıcı önekleriyle birlikte tam kullanım şu şekildedir:

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

Bu özellikleri evrensel seçicide kullanmak, çok sayıda kullanıcı tarafından oluşturulan içeriğe sahip bir siteniz varsa yararlı olabilir. Adil bir uyarı olmasına rağmen, başlıklarda ve önceden biçimlendirilmiş metinlerde garip görünebilir (

).

İlişkili


    

  • taşma sargısı
    • 

  • tire
    • 

  • Beyaz boşluk
    • 

  • Uzun Kelimeleri ve URL'leri Yönetme
    • 



Tarayıcı Desteği


Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.


Masaüstü Bilgisayar


 

 

 Krom Firefox IE Kenar Safari 


 

 

 

 23 49 11 18 6.1 


 

 



Mobil / Tablet


 

 

 Android Chrome Android Firefox Android iOS Safari 


 

 

 

 88 85 4.4 7.0-7.1 


 

 



Safari ve iOS break-alldeğeri destekliyor ancak desteklemiyorkeep-all