動的なサイズのフォントサイズ

Question

CSSだけでは、1行の行を折り返さずにdivの幅と高さに合わせることが可能ですか？

vhとvwユニットは有望に見えますが、答えのようには見えません。

Answer 1

子要素の高さが親要素の高さに収まるまで、javaScriptを使用してフォントサイズを小さくしたり小さくしたり（大きくしたり大きくしたりする）ことができます。テキストのfont-sizeを変更し、コンテナのwidthheightを変更してください。

var samp = document.getElementById('samp'); 
 

 
fitFont(samp); 
 

 

 
function fitFont(elem){ 
 
    var child = elem.children[0]; 
 
    var getFontSize = parseFloat(window.getComputedStyle(child).getPropertyValue('font-size')); 
 
    
 
    while(child.offsetHeight>elem.clientHeight){ 
 
    getFontSize -= .1; 
 
    child.style.fontSize = getFontSize + 'px'; 
 
    if(child.offsetHeight<=elem.clientHeight){ 
 
     child.style.visibility = 'visible'; 
 
     return; 
 
    } 
 
    } 
 
    while(child.offsetHeight<elem.clientHeight){ 
 
    getFontSize += .1; 
 
    child.style.fontSize = getFontSize + 'px'; 
 
    if(child.offsetHeight>=elem.clientHeight){ 
 
     child.style.visibility = 'visible'; 
 
     return; 
 
    }  
 
    } 
 
    
 
}

#samp { 
 
    background-color:white; 
 
    width:280px; 
 
    height:100px; 
 
    border:solid 2px #33aaff; 
 
} 
 

 
#samp span { 
 
    display: inline-block; 
 
    visibility:hidden; 
 
    font-size:50px; 
 
}

<div id="samp"> 
 
    <span>text is bigger now and goes outside of div text is bigger now and goes outside of div text is bigger now and goes outside of div text is bigger now and goes outside of div 
 
    </span> 
 
</div>

Answer 2

あなたが取得するつもりだ最も近いものはVMINにVWとVHの値に外容器&テキストコンテナ、およびテキストコンテナのフォントサイズを設定しています。

それ以外

.outer { 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.text { 
 
    width: 30vw; 
 
    height: 30vh; 
 
    border: solid 1px #269abc; 
 
    font-size: 10vmin; 
 
}

<div class='outer'> 
 

 
    <p class='text'>This is text</p> 
 

 
</div>

、JavaScriptを使用するつもりが必要だ/ jQueryの