CSS: Thiết lập phông chữ đến một kích thước như vậy văn bản sẽ chiếm toàn bộ thùng chứa

Question

thể trùng lặp:
resize font to fit in a div (on one line)

Đối với một Flashcard nhỏ ứng dụng sản xuất tôi cần phải đặt font đúng kích thước để văn bản sẽ lấp đầy tất cả chiều rộng có sẵn của vùng chứa có kích thước cố định; giống như văn bản trong bốn hộp trong ảnh này:

Một giải pháp sử dụng GD GD đã được cung cấp cho this question. Có một giải pháp phía khách hàng với css hoặc javascript cho vấn đề này?

Answer 1

nó không phải là brute force;)

HTML:

<span id="txt">Lorem</span> 
<div id="card"></div> 

CSS:

#card { 
    width: 150px; 
    height: 50px; 
    border: 1px solid black 
} 

#txt { 
    display: none 
} 

JS (sử dụng JQuery):

var size_w = (150/$('#txt').width() - 0.05); 
var size_h = (50/$('#txt').height() - 0.05); 
var size = size_w>size_h?size_h:size_w; 
$('#card').css('font-size', size + 'em'); 
$('#card').text($('#txt').text()); 

fiddle đây: http://jsfiddle.net/cwfDr/

Được rồi, bây giờ nó bao gồm cả chiều cao và chiều rộng. ;)

Answer 2

Tôi đã xem xét cách đây nhiều năm và chúng tôi quyết định cách duy nhất để thực hiện điều đó không gây ra sự điên rồ là sử dụng hình ảnh thay vì văn bản cho các con số, và sau đó tính toán kích thước của hình ảnh cần thiết dựa trên chiều rộng của container (chúng tôi cũng có văn bản). Ngoài ra, chúng tôi đã sử dụng phông chữ có chiều rộng cố định được chọn cho số/văn bản.

Một lựa chọn khác là flash thay thế văn bản, trong đó cung cấp cho bạn kiểm soát nhiều hơn: http://www.mikeindustries.com/blog/archive/2004/08/sifr

Có thể có các kỹ thuật khác đã được phát triển trong vài năm trở lại đây, và có thể CSS3 có thể giúp (mặc dù nó có thể không được hỗ trợ rộng rãi nếu nó đã làm), nhưng kỹ thuật hình ảnh đã cho chúng tôi những tiếng nổ tốt nhất cho buck.

Answer 3

Tôi đã viết plugin nhỏ, nhỏ này để làm điều đó cho vừa với cửa sổ trình duyệt.

  (function($){ 
       $.fn.extend({ 
        sizeFont: function() { 
         return this.each(function() { 
          $obj = $(this); 
          $obj.css({fontSize:($(window).width()/$obj.width())+'em'}); 
         }); 
        } 
       }); 
      })(jQuery); 

Tôi chắc chắn bạn có thể sửa đổi điều này để phù hợp với nhu cầu của mình bằng cách chuyển đổi $(window) thành bất kỳ thứ gì bạn muốn. Đây là địa chỉ trực tiếp:

http://cullywright.com/