代码之家 › 专栏 › 技术社区 › kojow7

多行文字以适应React JS

reactjs javascript

kojow7 · 技术社区 · 5 年前

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

<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溢出。

使现代化

more specific question 关于一个名为没有按我期望的方式工作。

0 回复 | 直到 5 年前

lowtex 5 年前

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

Ji aSH 5 年前

您可以简单地将大小硬编码为50%

<div style="display:flex">
  <div style="width:50%;background:lightgrey;">
    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="width:50%;background:lightblue;">
    Some other text
  </div>
</div>

ahmednawazbutt 5 年前

您可以将容器的高度设置为“自动”,以便它在我们获取内容时发生变化。此外,还应设置最小高度和 max-height min-height 如果内容太大,它不会超过给定的容器高度。

为了禁止内容从盒子中取出,您可以使用 overflow:hidden 。这将防止内容从盒子中取出。

noor 5 年前

<div style={{ display: "flex" }}>
<div
    style={{
    flex: 1,
    backgroundColor: "lightGrey",
    wordBreak: "break-word"
    }}
>
    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, backgroundColor: "lightBlue" }}>
    Some other text
</div>
</div>

推荐文章