CSS - 强制文本填充n行

Question

有点添加问题，无法在其上找到任何内容。

我有一些带文字的div，它们有50％的宽度。 如何在必要时强制文本中断以形成3条平衡线？

基本上这是一个例子： 目前：

I am some text la la la
Text

我想要的是什么：

I am some
text la la
la Text

所以文本包装并平衡了3行。

有没有办法在CSS中执行此操作？

TIA。

Answer 1

您可以在css中为div添加高度。

.div{
    line-height: 1.5em;
    height: 4.5em;   
    overflow: hidden; 
}

Answer 2

文本正在扩展以占据包含它的元素的空间，即50%。如果您希望文本具有较小的宽度并保留div元素的大小，则需要将文本嵌套在具有不同宽度的另一个元素中。

我敢肯定，如果你看起来很努力，你会发现一个奇怪的黑客，使纯文字收缩到不同的宽度，但我相信使用另一个元素最有意义。

<div>
  <p>asdf asdf asdf asdf asdf asdf asdf asdf</p>
</div>

div {
  width: 50%;
}

p {
  width: 100px;
}