javascript - 多行文本以适应 React JS 中的父容器

Question

我正在使用 flexbox 布局，并试图让特定 div 中的文本调整大小以适合该 div。

例如，如果我有如下代码:

<div style={{display: "flex"}}>
   <div style={{flex: 1}}>
      A really, really, really, really long phrase here that will fit this div, and may wrap onto multiple lines if necessary. In this case it should fill half of the available space as the other div will cover the other half of the space.
   </div>
   <div style={{flex: 1}}>
      Some other text
   </div>
</div>

实际上，文本将从数据库中提取，因此长度是动态的。

如何让第一个 div 中的文本自动调整以适应整个 div？

说明:div 应保持固定大小，只有文本应缩小以适合 div 而不是溢出 div。

更新

我还发布了一个 more specific question关于名为 react-textfit 的特定模块未按我预期的方式工作。

Answer 1

这里有一些代码可以满足您的要求。

let size_div = document.querySelector("#font_size");
let div = document.querySelector("#fixed");

while (div.scrollHeight > div.clientHeight) {
  let style = window.getComputedStyle(div, null).getPropertyValue('font-size');
  let fontSize = parseFloat(style);

  if (fontSize <= 1) {
    break;
  }

  div.style.fontSize = "" + (fontSize - 1) + "px";
  size_div.innerHTML = "&nbsp;" + div.style.fontSize;
}

你可以在这里试试: https://codepen.io/lowtex/pen/xNawEO