文字数に応じて、フォントサイズを自動調節したい

Question

現在、CMSテンプレート用のHTMLファイルを作成しているのですが、
文字数に応じてフォントサイズを変化させ、親要素に収まりきるように自動調節したいです。

vhやvwでは画面の大きさ依存のため、うまくいきませんでした。

Fittyというプラグインも試しましたが、文字数が少ないとき、親要素よりも文字が大きくなってしまいます。

CSSでもJSでも構わないので、自動で調節する方法はないでしょうか。
Fittyでできるのであればやり方をお教え願いたいです。

Comments

[x_x]

Fitty で2文字でもうまくいってしまったため、ダメなパターンの例を挙げられるでしょうか？

[tamakiti]

失敗例としては、親要素にheightを設定した場合、フォントが大きくなりすぎ、親要素からはみ出てしまいます。

[x_x]

一行に収まる大きさにするのではなく、幅と高さが決まった中ではみ出ないようにということですか？

[tamakiti]

はい、その通りです。
見出しなど、親要素に背景色がついた中に収めたいと考えています。

Answer 1

fittyをしかける際に引数でoption:maxSizeを指定するとそのサイズまででフォントが大きくならないようです。
立幅の限界のフォントサイズを考えてmaxSizeを指定すればやりたいことを実現できないでしょうか。

Comments

[tamakiti]

回答ありがとうございます。
これなら実現できそうです。

重ねてで申し訳ないのですが、親要素にpadding、または子要素にmarginがあるとはみ出てしまいます。
はみ出ないようにする方法はあるのでしょうか。

[tamakiti]

やりたいことが実現できたため、早急に回答をしてくださった方をBAとさせていただきます。
みなさま、ありがとうございました。

[SE-studying-now]

BAありがとうございます。
質問頂いていたのを気付かなかったです。。
なにわともあれ、解決できてよかったです。