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

Question

我有一些 div 需要在其中容纳各种文本元素。有多个元素(p、h1、li、pre)

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

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

我正在使用 ReactJS，并且愿意接受 Javascript 或 CSS 解决方案。

问题示例

Answer 1

这是使用 JQuery 的解决方案。基本思想是，在页面加载时，每个包含的 div(包含文本的 div)的 column-width css 属性将设置为该 div 的内部宽度。这应该可以防止底部的文本被 trim 。

$(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"
  }
}