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

我不想截断文本或添加elipses。如果文本从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}

强制文本跨越N行

1 个答案: