inputの枠に合わせて文字を調整したい

#実現したいこと
Input要素に文字を入れたいのですが,文字の長さによってはInputの枠をはみ出し文字が隠れてしまいました.
そこでInputの幅に合わせて文字の大きさ font-size を調整できる様にCSSで指定したのですが文字の大きさがとてつもなく大きくなってしまいました.
具体的な解決策等ご存知の方,ご回答いただけますと幸いです

#試したコード

html
1<input id="question">

css
1input {
2    background-color: transparent;
3    border:2px solid black;
4    width: 30cm;
5    height: 15cm;
6    display: inline-block;
7    margin-bottom: 2mm;
8    text-align:center;
9    font-size: 80vw;
10    margin-left: 2cm;
11}

行動規範の内容に同意します

回答1件

ベストアンサー

css
1font-size: 80vw;

vwは画面幅を100vwとした単位です。80vwは画面幅の80%ということになりますので、当然とてつもなく大きくなります。
Input要素の幅を基準にしたいならその要素に指定した単位と同じものを使えばいいでしょう。
現状は width: 30cm; とcmを単位にしてますので、それを使って、例えば20文字程度入る大きさにしたいなら、30cm÷20=1.5cm にすればいいでしょう。