html - CSS / Bootstrap - 如果文本超过列长度，则将文本移动到新行

Question

我们有一列（四列中的第一列），其文本可能超出可用列宽。在这种情况下，我们希望将该列“发送”到其他三个元素（保留在第一行）下方的新行中。

例子：

如果第一列verylongtext会导致换行，

<div class="row">
   <div class="col">verylongtext</div>
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>

那么它应该变成相当于

<div class="row">
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>
<div class="row">
   <div class="col">verylongtext</div>
</div>

有没有办法通过引导程序或其他技术来实现这种行为？

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

我会使用grid-model来做到这一点：尝试各种显示尺寸并查看文本中断的位置。然后使用响应式实用程序将其隐藏在该屏幕尺寸中，并使该尺寸和较小尺寸的替代渲染可见。

<div class="row">
   <div class="col d-none d-md-block">verylongtext</div>
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>
<div class="row">
   <div class="col d-md-none">verylongtext</div>
</div>

有一个小提琴可以看到一个工作样本。

另一种解决方案可能是使用 JS 来检测第一个 col 的 certical size 并查看它是否使用超过 line-height ......如果是，则移动它。但我认为第一种方法要好得多（不依赖 JS，不改变屏幕等）