2013-04-08 16 views
10

Tôi bắt buộc phải kéo dài văn bản theo chiều ngang, nhưng điều duy nhất tôi có thể tìm thấy là font-stretch, theo w3schools, không được bất kỳ trình duyệt nào hỗ trợ.Kéo dài văn bản theo chiều ngang bằng cách sử dụng CSS

Có cách nào khác để tôi có thể đáp ứng hiệu ứng này không?

+0

bản sao có thể có của [Css, Tôi có thể kéo dài văn bản không?] (Http://stackoverflow.com/questions/6351013/css-can-i-stretch-text) –

Trả lời

18

- bạn có thể đạt được điều này bằng cách sử dụng CSS 2D transforms.

Đây là một số đang hoạt động jsFiddle.

Note rằng ví dụ trong fiddle/code dưới đây là dành cho Chrome/Safari (webkit), tuy nhiên, bạn có thể sử dụng 2D biến trong tất cả các trình duyệt chính bằng công -moz-, -o-, và ms tương đương tiền tố/phương pháp!

HTML:

<span>Hello!</span> 

CSS:

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

Hỗ trợ:

Nó được hỗ trợ trong Chrome, Firefox, IE9 + và các trình duyệt Opera.

+1

Cảm ơn bạn. Đó là chính xác những gì tôi cần. – JBrookes

+1

Tôi đã làm điều đó rồi nhưng tôi đang chờ bộ đếm thời gian đếm ngược. – JBrookes

+0

Tiền tố 'moz' là firefox cụ thể và tự động cập nhật firefox, vì vậy không cần ở đó. Và tiền tố '-ms-transform' chỉ cần thiết cho các bản phát hành trước của IE9, vì vậy không cần hỗ trợ ở đó. –

1

Bạn có ý nghĩa này không? Với CSS:

text-align: justify 
+1

không có nghĩa là để kéo dài một từ theo chiều ngang – JBrookes