文字数に合わせてfont-sizeを動的に変更したい

Question

ユーザが設定した文字を表示するWEB画面作成を検討しているのですが、設定可能文字数の最大値(50文字)に合わせて文字を表示するととても小さい文字になってしまうので、文字数に合わせて動的にfont-sizeを変更できないかと考えています。

ブラウザサイズに合わせて動的に変更することは、下記URLに記載されている「vw」等を使用すればできそうですが、いろいろ駆使して文字数にあわせて動的にfont-sizeを変更することはできないでしょうか。

https://stand-4u.com/css/css-fontsize.html

Comments

[yambejp]

> 最大値(50文字)に合わせて文字を表示するととても小さい文字になってしまう

でも50文字表示するときはどうせ小さい文字なんですよね？
だったらそれがデフォルトでもおかしくはないと思いますけど

[x_x]

過去に同様の質問があったはずですが、検索しているでしょうか？

Answer 1

CSSで文字数を認識する方法はないので、JavaScriptを使わないと無理だと思います。
また、固定幅フォント以外だと文字ごとに幅が異なりますので、単純に文字数だけではテキスト幅は決定できません。

下記のような方法で文字幅を取得することになります。

[JavaScript]動的なテキストの幅を取得し、スタイルを適用する | Black Everyday Company

上記は、テキスト幅で文字間隔を詰めたり、省略記号を付けたりしてますが、フォントサイズを変更するように書き換えればいいでしょう。

ただ、文字数が多くなれば小さくなりすぎる、少なければ大きくなりすぎる、のには変わりないので、フォントサイズは適切なものにしておいて、折り返して表示するなり、省略表示するなり、別な設計を検討するのが普通だと思います。

Comments

[sato4000]

ご回答いただきありがとうございます。
確かに大きすぎたり、小さすぎると別の問題が起きそうなので、別の設計も検討いたします。

Answer 2

スマホからなので簡単に。
こういう事をやりたい？

Comments

[sato4000]

ご回答いただきありがとうございます。
やりたいことは似ていますね。参考にいたします。

Answer 3

設定に基づいて出力する部分で、文字数を数えてそれにあわせたCSS（クラス）を指定すればよいです。

Comments

[sato4000]

ご回答いただきありがとうございます。参考にいたします。