Có văn bản mở rộng quy mô kích thước để phù hợp với container

Question

Sử dụng CSS, và đặc biệt là không có javascript onload, nó sẽ có thể để làm điều này:

Bạn có một tế bào của 150px rộng và 100px chiều cao. Nội dung có chứa văn bản, ví dụ: $ 20,00 hoặc bất kỳ biến thể nào trong số đó.

Bạn muốn nó hoàn toàn phù hợp với kích thước của vùng chứa.

Tôi có thể làm điều đó với javascript, kích thước văn bản cho đến khi vùng chứa không có đệm/lề đạt đến chiều rộng và/hoặc chiều cao của ô. Hoặc chứa nó trong một cái gì đó có một bộ tràn để tự động và xem khi nó tràn hoặc một cái gì đó.

Có thể thực hiện bằng CSS thuần túy không?

Hãy xem xét rằng phông chữ không phải là phông chữ có kích thước cố định. Sử dụng Arial nếu bạn thích.

Answer 1

Một điều mà tôi đã làm điều đó không hoàn hảo nhưng có thể hoàn thành công việc trong một số trường hợp là sử dụng quy tắc @media cho kích thước màn hình nhỏ hơn X pixel, đặt kích thước phông chữ nhỏ hơn hoặc lớn hơn.

h2{ 
    font-size:25px 
} 

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */ 
    h2{ 
    font-size:19px; 
    } 
} 

Tất nhiên điều này sẽ chỉ hoạt động giả định kích thước vùng chứa văn bản dựa trên kích thước cửa sổ theo một cách nào đó.

Answer 2

Kiểm tra này ra: http://css-tricks.com/viewport-sized-typography/

Thật không may này chỉ hoạt động trong Chrome 20+ & IE 10+ vì vậy bây giờ bạn sẽ phải gắn bó với a js solution ....