如何自动将内容拆分为2行而不使用div

Question

我试图创建一个div，用户可以在其中输入一些内容，内容长度最多只能扩展到300px（来自LHS）和高度100px。如果内容超过该内容，它应该开始在剩余的空间中显示它（如图所示的RHS）。我不想创建多个div，因为它是一个CMS，用户只需按照自己的意愿输入文本，并且在填充一定高度后应自动将内容传播到第二个div。没有脚本可以实现吗？我试图尽可能地避免脚本

这是我到目前为止尝试的代码。但只能包装一行。不是第二个

＆＃13;

＆＃13;

div{
width:300px;
max-height:100px; 
overflow:hidden;
text-align:justify;
word-break: break-all;
}

＆＃13;

<div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这就是CSS专栏的用途：

div {
    column-count: 2;
    column-width: 300px;
}

你可以在这里阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns

Answer 2

column-count属性指定元素应分成的列数。

只需添加column-count:2作为div的样式。

＆＃13;

＆＃13;

div{
column-count:2 
 
}

＆＃13;

<div>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</div>

＆＃13;

＆＃13;

＆＃13;

阅读here