Question

所以我有一堆flex div，每个span都包含div中的数字。数字可以是2,3,4，最多7位数。我想将每个font-size $('.paramItem').each(function() { $(this).css({ 'font-size': $(this).width() / $(this).html().length / 2 }) });设置得尽可能大，以便内部数字不会溢出。我计算了div宽度并将其除以span的长度。但是在一些小的显示尺寸中，文字会变小。有什么想法吗？

＆＃13;

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

＆＃13;

<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>

＆＃13;

{ 
  name: 'John Doe',
  expected_ctc: 'A',
  experience: 'B',
  profile_role_id: 1
}

＆＃13;

Answer 1

您可以将结果乘以确定的系数。然后看看哪个系数最能匹配你在渲染方面的预期。

from datetime import datetime

print(datetime.strptime(" 20170604 0600", " %Y%m%d %H%M"))
print(datetime.strptime("20170604 0600", "%Y%m%d %H%M"))

现在是

'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;
}

文本的最大可用宽度

1 个答案: