阻止文本在包含各种子元素的div中裁剪而无需调整文本大小？

Question

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

我见过的每个解决方案仅适用于div单个元素，或者通过调整内容的大小以使其适合而起作用。

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

我正在使用ReactJS，并且可以使用Javascript或CSS解决方案。

问题的例子

Answer 1

这是使用JQuery的解决方案。 基本思想是，在页面加载时，每个包含的div（保存文本的div）的column-width 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"
  }
}