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>

是否有任何方法可以通过引导程序或其他技术来实现此行为？

Answer 1

如果要保持固定的col宽度，请像col-4一样使用它而不是col。它会处理大文本，大文本会掉很长一段时间。

Answer 2

您可以使用jquery实现此功能，您需要做的就是定义要考虑的“非常长的文本”的字符数，例如，假设我们将其定义为12。

以下是代码段：

var longTextLength = 12;
$(document).ready(function(){
  $("div.col").each(function(){
    //We look for every class called col
     if($(this).text().length >= longTextLength)
     {
      //If it's a very long text then we do logic
      //We look for the class parent
      var customDiv = $("<div/>");
      customDiv.addClass("row");
      customDiv.html($(this).get(0).outerHTML);
      customDiv.insertAfter($(this).parent());
      $(this).remove()
     }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
   <div class="col">verylongtext</div>
   <div class="col">1</div>
   <div class="col">2</div>
   <div class="col">3</div>
</div>

Answer 3

我将使用grid-model进行此操作：尝试各种显示尺寸，并查看文本在何处折断。然后使用responsive utilities将其隐藏在该屏幕尺寸中，并使该尺寸和更小尺寸的替代渲染可见。

<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>

有一个fiddle可以查看工作示例。

另一种解决方案可能是使用JS来检测该第一个col的标准大小，并查看它是否使用的行高...如果超过，请移动它。但我认为第一种方法要好得多（不依赖JS，没有屏幕更改等）。