Question

我需要将可变数量的文本放入可变大小的矩形div中，这些矩形自身具有响应性（使用vw / vh）。

有数百个div，每个div具有不同的大小，我事先不知道：它是根据原始尺寸（以厘米为单位）计算的，以保持其长宽比。每个div内部都有文本，该文本应适合容器（并非完美，只是没有溢出）。通常会有很多文本溢出，但是我没有滚动条，文本应该适合容器。

请记住以下几点：

必须保留divs长宽比
必须保留文本的换行符
文字是否太小而看不清

到目前为止，我已经尝试用视口单位调整字体大小。问题是每个div的字体大小都不同。我需要一些公式来根据文本的数量和/或容器的大小来计算字体大小。

以下是一些示例：https://codepen.io/gramm/pen/VJPavg

div#tm12901 {
  width: 15.952380952380954vh;
  height: 50vh;
  font-size: 0.8vh;
  line-height: 1.5;
  background: Pink;
}

我也曾尝试检测溢出，但是到目前为止没有成功（这很容易做到，而且我只是不懂js）。

另一个示例：https://codepen.io/gramm/pen/MMJpdb

//trying to detect overflow
$('.text').each(function(){
  if($(this).clientHeight < $(this).scrollHeight){
    console.log('overflow detected!');
  }
});

是否有更好的方法：计算字体大小或检测溢出？而且，您有没有任何指针可以帮助您使用这两种方法？

对于detect-overflow方法，每次调整窗口大小时，div都会改变大小吗？

如何计算字体大小以适合容器？

0 个答案: