文本的最大可用宽度答案

【问题标题】：Max available width for text文本的最大可用宽度
【发布时间】：2017-05-16 04:38:08
【问题描述】：

所以我有一堆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>

【问题讨论】：

标签： jquery html css flexbox

【解决方案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>

【讨论】：