2011-03-18 12 views
16

WebKit tarayıcılarından herhangi birinde heceleme başarıyla uygulanmış biri var mı? CSS3 hyphenation stilinin yanı sıra -webkit-hyphens: auto'u denedim. Bunlardan hiçbiri için zar yok. Ya da belki yanlış bir şey yapıyorum?WebKit Hyphenation

Not: Sadece Mac üzerinde Safari ve Chrome'u denedim.

Güncelleme: Kod örneği

<html> 
    <head> 
    <style> 
     div { 
     -webkit-hyphens: auto; 
     } 
    </style> 
    </head> 
    <body> 
    <div style="width: 150px; border: solid 1px black;"> 
     <p>Anaideia, spirit of ruthlessness, shamelessness, and unforgivingness</p> 
     <p>Supercalifragilisticexpialidocious, Antidisestablishmentarianism, Floccinaucinihilipilification, Hippopotomonstrosesquipedaliophobia</p> 
    </div> 
    </body> 
</html> 
+0

Onları nereye uygulamaya çalışıyorsunuz, örneğin bize kullandığınız metni verebilir misiniz? –

+0

İşte bu kodun bir bağlantısı (webkit doğru yazıldığından :)) http://jsbin.com/ihama4/2/ –

+0

Bu uzun kelimelere nasıl geldiniz? Daha önce sadece ilkini duydum. Supercalifragilisticexpialidocious –

cevap

25

-webkit-tire yukarıda iOS 4.2 ve üzerinde çalışıyor ve kısmen webkit nightly'ler desteklenir.

Webkit:

Webkit

iOS 4.3: Olmayacak, ile (OS X Lion Safari 5.1 ile test ve iPad'de Safari mobil) Safari'de çalışan

iOS 4.3

+2

+1 açıklayıcı ekran görüntüleri için –

+1

2015'ten itibaren hiç kullanmayın: http://caniuse.com/#feat=css-hyphens –

+0

Neden , hem Safari 9 hem masaüstünde hem de iOS 9'da hala -webkit-öneki kullanılıyor, diğer tarayıcılar da aynı şekilde düzeltilmemiş. –

12

Chrome henüz. Tire tarayıcı desteği için bkz. http://caniuse.com/css-hyphens. Büyük bir hayır-hayır oldu tarayıcılarda

p { 
    hyphens:auto; 
    text-align:justify; 
    -webkit-hyphens:auto; 
    -webkit-hyphenate-character:"\2010"; 
    -webkit-hyphenate-limit-after:1; 
    -webkit-hyphenate-limit-before:3; 
    -moz-hyphens:auto; 
} 

(son satır Firefox içindir)

Yani yaslanmış metin: Burada

paragraflar 320 ve yukarı proje (http://www.stuffandnonsense.co.uk/projects/320andup/) 'de tarz nasıl yavaş yavaş bir gerçeklik haline geliyor.

3

Daha iyi günler geliyor .. Editors working draft'a göz attıktan sonra - Örnekte, gelecekte daha iyi bir mülkün 'overflow wrap:' olacağını düşünüyorum. 'tireler:' genel biçimlendirme gereksinimleri için gerçekten daha uygundur, taşma-sarma ise kırılma gerektiren aşırı uzun kelimelerin acil durumları içindir. tire bile çalışma taslağı değil: En iyi değeri

* { 
overflow-wrap:hyphenate. 
} 

Eyvah taşma-wrap doesent iphone veya firefox ve taşma-şal henüz herhangi bir şekilde destek gibi görünüyor olacaktır. (sadface)