Flexbox的。计算字体大小以适合单个文本行和多行灵活项目上的文本

Question

我有一个100vh的柔性容器，方向柱。在它下面我有一个动态数量的具有相同高度的弹性项目。这个弹性项目共占用所有垂直空间：

<div>
  <ul class="container">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

和css：

ul {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
li {
  flex: 1 1 auto;
}

这些项目包含文字。我希望将文本调整到项目的高度。所以我使用js和视口单元来计算正确的字体大小：

var lis = document.querySelectorAll('li');
var fontsize = (100 / lis.length) * 0.8;
document.querySelector('.container').style.fontSize = fontsize + "vh";

Here is the full working fiddle I just described.

我的问题是，如果一个弹性项目包含的文本足以包裹到一个或多个新行，那么该方法将不再起作用。

<div>
  <ul class="container">
   <li>1</li>
   <li>2</li>
   <li>multiline becomes a problem with this approach</li>
  </ul>
</div>

Here is the demonstration of the problem.

要计算多行项目的字体大小，我需要知道它占用了多少行，但这本身取决于字体大小。所以这是一个吃自己尾巴的问题。

我的方法

我能想到的一种可能方法如下：

1 Detect number of li's
2 Trigger font-size calculation as seen above and apply
3 Calculate if any lis text will wrap onto new lines and how many (how?)
  3.a. If no texts wrap into new lines stop here.
  3.b. If there is text that wraps into new lines 
    3.b.1. Sum number of li's + all new lines on all multiline li's
    3.b.2. Re-trigger font-size calculation with this number and apply
    3.b.3. Calculate again if any li's text will wrap onto how many new lines, and compare with before font-size change.
      3.b.4.a. If there are the same ammount of new lines, stop here.
      3.b.4.b. If there are more new lines, repeat from step 3.b.1

但是这种方法看起来很脏，并且可能导致字体大小计算和调整的许多步骤。另外我不确定如何执行第3步。

那么，如何解决这个问题呢？

这个问题被标记为可能与this other question重复。但是这个问题特别要求将文本拟合成一行，这是一个非常不同的问题。

这说我可能会从一些答案中得到一些提示，因为他们试图猜测文本是否溢出了div。特别是我对this answer感到好奇，因为@Hoffmann特意说要试图避免我在我的方法中提到的循环问题。我将尝试理解他的插件的代码，现在由其他人维护：https://github.com/BrOrlandi/big-text.js/blob/master/big-text.js

谢谢

Answer 1

使用等宽字体，内在单位（vh不是vw），justify-content: spaced evenly，line-height是演示中使用的主要因素。

---

/* Reset */
* {
  margin: 0;
  padding: 0;
}
/* 
- Serif and Sans Serif fonts vary greatly, monospaced   
  fonts are a lot easier to use. 
- Assign the primary font on :root so if an explicit font-
  size is set elsewhere rem units reference font-size on 
  :root directly. 
- The font shorthand is as follows:
    font: font-weight, font-size/line-height, font-family
  line-height set at 10vh fits 100vh high <ul> well.
*/
:root {
  font: 400 6vh/10vh Consolas;
}
html, body {
  width: 100%;
  height: 100%;
}
body {
  overflow-x: hidden;
  overflow-y: scroll;
  margin: 5vh 15vh 0 10vh;
}
/*
Assign max-height: 100vh to the element containing the <ul>
*/
main {
  width: 96%;
  max-height: 100vh;
}
/* 
justify-content: space-evenly is exactly what it says 
*/
ul {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100vh;
}
li {
  flex: 1 1 auto;
}

<main>
  <ul>
    <li>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</li>
    <li>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</li>
    <li>The bedding was hardly able to cover it and seemed ready to slide off any moment.</li> 
    <li>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.</li>
    <li>"What's happened to me?" he thought. It wasn't a dream.</li>
  </ul>
</main>