是否可以使用 CSS 將字體大小調整為 div 寬度？

Question

我有一個寬度為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大小是響應式的，這很重要。 提前致謝！

Answer 1

你只需要添加display: inline; 在你的代碼中

 .parent { width: 70%; height: auto; min-height: 100px; background: red; font-size: 10vw; display: inline; }

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

Answer 2

也許不是你正在尋找的東西，但有些東西 - 你可以相對於視圖寬度制作字體和元素。

 p { font-size: 5vw; background-color: red; width: 50vw; }

 <p> I'm a P! </p>

Answer 3

**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>

Answer 4

是的，但我認為您需要使用 JS(jQuery)。

JS：

$(function(){

var box = $('.box');
var boxWith = box.width();

$('.box h1').css('font-size',boxWith);

});

https://jsfiddle.net/moongod101/sdfaatp8/

Answer 5

在這里，我更新了它.... JS Fiddel

嘗試使用

css

.parent 
 {
      width:70%;
      height:auto;
      min-height:100px;
      background:red;
      font-size:10vw;          
  }



span{
      display:inline-block;
      transform:scale(1.8,1);
      -webkit-transform:scale(3,1);
 }

HTML

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