从溢出文本创建多列

Question

我正在寻找一种动态地将连续文本分成多列的方法仅当第一列的内容溢出时。它应该是响应式的并且适用于任何设备宽度。解可以是(S)css或JavaScript.

我已经按照建议 here 尝试使用 column-count 但这总是会创建多个列，无论第一列中是否还有足够的 space。

这就是我想在没有提到的情况下实现的目标 column-count

.content {
  height: 90vh;
}

.text {
  width: 300px;
  column-count: 2;
}

 <div class="content">
   <div class="text">
      Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
   </div>
 </div>

Answer 1

这很 hacky，但我认为您可以在 JS 中通过计算文本的大小然后在超过某个值时修改 column-count 来做到这一点。类似于：

const textElement = document.getElementsByClassName('text')[0];
const textElementHeight = textElement.getBoundingClientRect().height
const numColumns = textElementHeight / SOME_CONSTANT;
textElement.style.columnCount = numColumns

Answer 2

您需要将 height 设置为 .text 以便它知道何时移至下一列：

.content {
  height: 90vh;
}

.text {
  height:100%;
  width: 300px;
  column-count: 1;
}

<div class="content">
   <div class="text">
      Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Cras ultricies ligula sed magna dictum porta. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Nulla porttitor accumsan tincidunt. Lorem ipsum dolor sit amet,
      consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.
   </div>
 </div>

从溢出文本创建多列

Creating multiple columns from overflowing text

html

javascript

css

sass