防止文本在包含各种子元素的div中剪切，而不调整文本大小？

Question

我有一些divs需要在其中包含各种文本元素。有多个元素（p，h1，li，pre）

我看到的每个解决方案仅适用于div中的单个元素，或者通过调整内容大小来适应。

有没有办法剪裁不完全适合的线？

我使用的是ReactJS，并且对Javascript或CSS解决方案持开放态度。

问题示例

Answer 1

这是使用JQuery的解决方案。基本思想是，在页面加载时，每个包含div（包含文本的div）的列宽css属性将设置为该div的内部宽度。这样可以防止文本被修剪到底部。

$(document).ready(function(){
    $.each($(".box"), function(i, box){
        $(box).css("column-width", $(box).innerWidth() + "px")
    });
});

在正常的Javascript中 -

window.onload = function(){
  var boxes = document.getElementsByClassName("box");
  for(var i = 0; i < boxes.length; i++){
    boxes[i].style.columnWidth = boxes[i].style.width + "px"
  }
}