html ボックス内の文字の大きさ

Question

ruby でrailsアプリ作っていて、ビュー画面のHTMLの記述でうまくいかないことがあるので質問させていただきました

<div>などでボックス作り、その中にテキストがある際にテキストをボックスの大きさに合わせて大きくしたいのですが、どうしてもうまくいきません。 font-sizeなど色々試してみたつもりではあるのですが、丁度いい大きさにできたと思ったらいつもボックスからテキスト部分の要素がはみ出してしまいます。

実際の例ですが、

<div class="sample">
  <p>サンプル</p>
</div>

この時、cssで.sample{width:500px,height:50}のようなボックスの場合、サンプルの文字をはみ出さないようにしつつボックスいっぱいに大きくするにはどうしたらよいでしょうか？

Answer 1

自己解決できました！
フォントやサイズなのでひたすら調べていましたが、テキストの方で調べていたところ参考になる記事ありましたのでのdせておきます（https://qiita.com/Shinji-m/items/69a392685699f3ba95fb）

結果として、縦方向の中央寄せで文字サイズ大きくしたらできました。あまり大きくしすぎるとまたボックスが崩れてしまいますので気をつけなくてはでした。

vertical-align: middle;とdisplay: table-cell;とheight指定。で縦の中央寄せ
場合によっては、.line-heightを指定するだけでもできそうな感じでした。

以上、考えていただいた方ありがとうございましたm(._.)m

Answer 2

たとえばここで紹介されているvwとか使ってみるのはどうでしょうか。

Comments

[takeke]

コメントありがとうございます！vwもうまくいきませんでしたm(._.)m
ですが、あれからtextなどで調べていたら結構参考になったので本記事に追記します。