jquery - 文本的最大可用宽度

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>