Czy tekst skalowanie rozmiarów, aby pasowały do pojemnika

za pomocą CSS, a konkretnie nie onload JavaScript, byłoby możliwe, aby to zrobić:Czy tekst skalowanie rozmiarów, aby pasowały do pojemnika

Masz komórkę 150 pikseli szerokości i 100px wysokości. Zawiera tekst, np .: 20,00 USD lub dowolny wariant tego.

Chcesz idealnie dopasować się do rozmiaru pojemnika.

Byłbym w stanie to zrobić za pomocą javascript, zwiększ rozmiar tekstu, dopóki pojemnik bez wypełnienia/marginesu nie osiągnie szerokości i/lub wysokości komórki. Lub zawierać go w coś, co ma przepełnienie ustawione na auto i zobaczyć, kiedy przepełnia lub coś.

Czy można to zrobić przy użyciu czystego CSS?

Należy wziąć pod uwagę, że czcionka nie jest czcionką o stałym rozmiarze. Użyj Arial, jeśli chcesz.

Źródło

2012-01-24 MHD

Nie sądzę, że można to zrobić bez użycia jquery, sprawdź tę odpowiedź: http://stackoverflow.com/questions/4408937/font-size-auto-ad-adjust-to-fit – Robert

Byłbym drugi, że . Nie można tego zrobić za pomocą czystego CSS. – Jonas

Twoje najlepsze wyniki będą prawdopodobnie wynikiem pewnej magii calc() w rozmiarze czcionki. Zrobiłem z tym eksperymenty, ale tak naprawdę, jeśli nie masz zmiennych i nie możesz ustalić szerokości poszczególnych znaków, nie możesz tego zrobić przy pomocy CSS. Prawdopodobnie znasz [FitText] (http://fittextjs.com), ale to jest łatwy sposób robienia tego z JS w przeciwnym razie - oszczędza ci dużo pracy :) Powiedz nam, jeśli wymyślisz jakieś intrygujące rozwiązanie, btw . – fredrikekelund

Jedno, co mam zrobić to nie jest idealne, ale w niektórych przypadkach można wykonać zadanie, używając reguły @media dla rozmiarów ekranu mniejszych niż X pikseli, ustaw mniejszy lub większy rozmiar czcionki.

h2{ 
    font-size:25px 
} 

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

Oczywiście działałoby to tylko przy założeniu, że rozmiar kontenera w jakimś sensie jest oparty na rozmiarze okna.

Źródło

2012-12-21 18:40:02 Tyler