2013-04-08 9 views
10

Metni yatay olarak genişletmem gerekiyor, ancak bulabildiğim tek şey, w3schools'a göre herhangi bir tarayıcı tarafından desteklenmeyen font-stretch idi.CSS'yi kullanarak metni yatay olarak genişletme

Bu efekti karşılayabileceğim başka bir yol var mı?

+0

olası yinelenen [Css, ben metin germek miyim?] (http://stackoverflow.com/questions/6351013/css-can-i-stretch-text) –

cevap

18

Evet - Eğer CSS 2D transforms kullanarak bunu başarabilirsiniz.

Çalışıyor jsFiddle.

Not keman/kod örneği aşağıda Krom/Safari (webkit) için olduğunu Ancak, 2D -moz-, -o- ve ms eşdeğer ön ekler/yöntemleri kullanarak tüm büyük tarayıcılarda dönüşümleri kullanabilirsiniz!

HTML:

<span>Hello!</span> 

CSS:

span {  
    transform:scale(3,1); 
    -webkit-transform:scale(3,1); 
    display:inline-block; 
} 

Destek: O Chrome, Firefox, IE9 + ve Opera tarayıcılarında desteklenmektedir

. arasında

+1

Tanklarının tek bir kelime germek anlamına hiçbir sen. Tam olarak ihtiyacım olan şey bu. – JBrookes

+1

Bunu zaten yapmıştım ama zamanlayıcının geri saymasını bekliyorum. – JBrookes

+0

'moz' öneki, firefox'a özgü ve firefox auto güncellemeleridir, bu yüzden gerek yoktur. Ve, -ms-dönüşümü öneki yalnızca IE9'un yayınları için gerekliydi, bu nedenle desteğe gerek yok. –

1

Bunu mu demek istediniz? CSS ile:

text-align: justify 
+1

Ben yatay – JBrookes