コンテナの幅に合わせて異なる長さのテキストを調整する

Question

私はあるサイズの要素を持っていて、長さの異なる1行または複数行のテキストを含んでいます。今私は、テキストの最も長い行がコンテナの幅に完全に収まるように、これらのテキストのフォントサイズを調整したいと考えています。

例として、私は、このマークアップ

.container { 
 
    width: 400px; 
 
    border: 1px solid green; 
 
    padding: .5em; 
 
} 
 

 
.container>div { 
 
    border: 1px dotted gray; 
 
}

<div class="container"> 
 
    <div>Lorem ipsum dolor sit amet.</div> 
 
    <div>Lorem ipsum.</div> 
 
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> 
 
</div>

はこのような何かを生成したい：私はrelative font sizing unitを使用してみましたが、常に調整することになった

をすべての子要素のfont-sizeを手動でオプションではありません。

this post複数の異なるテキストの長さがあるため、ビューポートに合わせてテキストを動的にスケーリングすることは役に立ちません。

これはCSSで解決できますか？または、文字数を数え、それに応じてフォントサイズを調整する、Javascriptのアプローチをとる必要がありますか？しかし、文字のサイズが異なるフォントを使用するとどうなりますか？

Answer 1

これはいかがですか？以下のコメントにつき、ここreponsive解である（また、これを参照してください -

---

更新

$(document).ready(function() { 
 
    var divEls = $('.container div'); 
 
    for(var i=0; i<divEls.length;i++){ 
 
    var span = $(divEls[i]).find('span'); 
 
    var fontSize = 16; 
 
    while (span.width() < $(divEls[i]).width()) { 
 
     span.css('font-size', fontSize++) 
 
    } 
 
    // wrap if span exceeds div width 
 
    if (span.width() > $(divEls[i]).width()) { 
 
     span.css('white-space', 'pre-wrap'); 
 
    } 
 
    } 
 
    
 
});

.container { 
 
    width: 400px; 
 
    border: 1px solid green; 
 
    padding: .5em; 
 
} 
 

 
.container>div { 
 
    border: 1px dotted gray; 
 
    white-space: pre; 
 
}

<div class="container"> 
 
    <div><span>Lorem ipsum dolor sit amet.</span></div> 
 
    <div><span>Lorem ipsum.</span></div> 
 
    <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

また、このCodePen Demo

ようES6ソリューションを試すことができます CodePen Demo）：

function resizeFont() { 
 
    var divEls = $(".container div"); 
 
    for (var i = 0; i < divEls.length; i++) { 
 
    var span = $(divEls[i]).find("span"); 
 
    var fontSize = (span.css("font-size").match(/\d+/)[0]); 
 
    while (span.width() < $(divEls[i]).width()) { 
 
     span.css("font-size", fontSize++); 
 
    } 
 
    while (span.width() > $(divEls[i]).width()) { 
 
     span.css("font-size", fontSize--); 
 
    } 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    resizeFont(); 
 
    $(window).on("resize", resizeFont); 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    max-width: 100vw; 
 
    border: 1px solid green; 
 
    padding: .5em; 
 
} 
 

 
.container>div { 
 
    border: 1px dotted gray; 
 
    white-space: pre; 
 
}

<div class="container"> 
 
    <div><span>Lorem ipsum dolor sit amet.</span></div> 
 
    <div><span>Lorem ipsum.</span></div> 
 
    <div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>