讓文字按比例放大以適應容器

使用CSS，特別是沒有onload javascript，是否有可能這樣做：讓文字按比例放大以適應容器

您有一個寬150px，高100px的單元格。它包含一個文本，例如：$ 20,00或其任何變體。

您希望它完全適合容器的大小。

我可以用javascript做到這一點，直到沒有填充/邊距的容器達到單元格的寬度和/或高度爲止。或者將其包含在某個溢出設置爲auto的東西中，並查看它何時溢出或什麼。

可以用純CSS完成嗎？

考慮到字體也不是固定大小的字體。如果你喜歡，請使用Arial。

來源

2012-01-24 MHD

我不認爲你可以做到這一點，而不使用jQuery，看看這個答案：http://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit – Robert

我會第二。這不能用純CSS完成。 – Jonas

您的最佳結果可能會與您的字體大小calc（）魔術。我對此做了一些嘗試，但實際上，如果您沒有變量並且無法確定單個字符的寬度，則無法使用CSS進行此操作。你可能知道[FitText]（http://fittextjs.com），但這是用JS做這件事的簡單方法 - 否則可以節省很多工作:)請告訴我們，如果你想出一些有趣的解決方案，btw 。 – fredrikekelund

有一兩件事，我已經做了這並不完美，但可以在某些情況下完成這項工作，是對尺寸小於X像素的屏幕尺寸使用@media規則，將字體大小設置得更小或更大。

h2{ 
    font-size:25px 
} 

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

當然這隻適用於假定文本容器大小以某種方式基於窗口大小。

來源

2012-12-21 18:40:02 Tyler

檢查了這一點：http://css-tricks.com/viewport-sized-typography/

不幸的是在Chrome 20+ & IE 10+所以現在你必須堅持a js solution ....這隻能

來源

2012-08-23 20:22:54

讓文字按比例放大以適應容器

回答

相關問題