web-dev-qa-db-ja.com

CSS：フォントサイズをdiv幅に適合させることは可能ですか？

幅が70％のdivがあります。ここでやりたいことは次のとおりです。

  • そのdivにいくつかの言葉を入れて
  • これらの単語がすべてのdiv幅を占めるようにフォントサイズを調整する

これはCSSのみで可能ですか？ここに私のコードがあります：

.parent {
  width:70%;
  height:auto;
  min-height:100px;
  background:red;
  font-size:10vw;
}
Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
  This Text
</div>

注：divサイズは応答性があります。これは重要です。前もって感謝します！

htmlcssfontsresponsive-designfont-size
20
Engkus Kusnadi

おそらくあなたが探しているものではなく、何か-ビューの幅に関連してフォントと要素の両方を作成できます。

p {
  font-size: 5vw;
  background-color: red;
  width: 50vw;
}
<p>
  I'm a P!
</p>
5
Anthony Astige

コードにdisplay: inline;を追加するだけです

.parent {
  width:70%;
  height:auto;
  min-height:100px;
  background:red;
  font-size:10vw;
  display: inline;
}
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  width:70%;
  height:auto;
  min-height:100px;
  background:red;
  font-size:10vw;
  display: inline;
}
</style>
</head>
<body>

<div class="parent">
  This Text
</div>

</body>
</html>
2
Marina
**You can change font-size:10vh;**
        .parent {
      width:70%;
      height:auto;
      min-height:100px;
      background:red;
      color:white;
      font-size:10vh;
    }
    Please help me to change the font-size dynamically to the parent class
    <hr>
    <div class="parent">
      Text
    </div>
0
Saw Saw