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

Вы можете достичь этого, используя 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 2

Я бы сделал это, используя grid-модель : поэкспериментируйте с различными размерами экрана и посмотрите, где текст разрывается.Затем скройте его в том размере экрана, используя отзывчивые утилиты и сделайте альтернативный рендеринг видимым для этого и меньших размеров.

<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 для определения точного размера этого первого столбца и посмотреть, использует ли он больше, чем высота строки ... и, если это так, переместите его.Но я думаю, что первый подход намного лучше (не полагается на JS, нет смены экрана и т. Д.)

Answer 3

, если вы хотите сохранить фиксированную ширину столбца, используйте его как столбец col-4 вместо столбца.Он позаботится о большом тексте, большой текст будет долго идти вниз.