テキストの最大幅は

Question

です。flex divの束にはそれぞれspanの数値が含まれています。数字は2,3,4〜7桁までです。 divのfont-sizeをできるだけ大きく設定して、内部の数字がオーバーフローしないようにしたいと考えています。私はdivの幅を計算し、それをスパンの長さで割った。いくつかの小さな表示サイズでは、テキストは小さくなる。何か案は？

$('.paramItem').each(function() { 
 
    $(this).css({ 
 
    'font-size': $(this).width()/$(this).html().length/2 
 
    }) 
 
});

.paramItem { 
 
    display: flex; 
 
    flex: 1 1 0; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    line-height: 1; 
 
    position: relative; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="paramItem ECG"> 
 
    <small>ECG</small> 
 
    <span>85</span> 
 
</div> 
 
<div class="paramItem NIBP"> 
 
    <small>ECG</small> 
 
    <span>120/50</span> 
 
</div>

Answer 1

あなたは決定された係数により結果を掛けることができます。次に、どのような係数がレンダリングの面で期待するものと最もよく一致するかを確認します。

'font-size': $(this).width()/$(this).html().length/2 

今

'font-size': ($(this).width()/$(this).html().length/2) * 3 // 3 is the coefficient 

$('.paramItem').each(function() { 
 
    $(this).css({ 
 
    'font-size': ($(this).width()/$(this).html().length/2) * 3 
 
    }) 
 
});

.paramItem { 
 
    display: flex; 
 
    flex: 1 1 0; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    line-height: 1; 
 
    position: relative; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="paramItem ECG"> 
 
    <small>ECG</small> 
 
    <span>85</span> 
 
</div> 
 
<div class="paramItem NIBP"> 
 
    <small>ECG</small> 
 
    <span>120/50</span> 
 
</div>

です