强制文本跨越 N 行

Question

我有一个宽度可变的 div（响应式）。文本内容由用户动态创建，因此行长可能因内容而异。有没有办法让里面的文本恰好重叠 3 行？理想情况下不使用 javascript 或 php（尽管如果 bootstrap 与 js 解决方案捆绑在一起，我并不强烈反对）

所以

<div>Here is some example text that regardless of the div width is always three lines</div>

将呈现为

Here is some example text that 
regardless of the div width
is always three lines

无论 div 是跨越页面的整个宽度还是仅仅几个 rems。

And
another
example

我不想截断文本或添加省略号。如果文本从 div 溢出，但仍然堆叠成三行，这是可以接受的。如果它有所作为，我正在使用 bootstrap 4 beta。

Answer 1

如果你可以像这样在 DIV 上设置一个类：

<div class="UserDynamic">Here is some example text that regardless of the div width is always three lines</div>

然后添加到 CSS：

div.UserDynamic{height:3em}

或者，如果您无法为用户生成的位设置 DIV，则将整个用户区域包含在单个 div 中，如下所示：

<div class="UserDynamics"><!--user content appears in this div-->
    <div>Here is some example text that regardless of the div width is always three lines</div>

    <div>Here is more example text that regardless of the div width is always three lines</div>
</div>

在 CSS 中：

div.UserDynamics div{height:3em}