Запретить автозаполнение столбца Bootstrap 4 в следующую строку - PullRequest
Новая
       8

Запретить автозаполнение столбца Bootstrap 4 в следующую строку

0 голосов
/ 05 декабря 2018

У меня есть компонент, в котором столбец авторасширения Bootstrap 4 переносится в другую строку.Наличие элемента с классом «text-truncate» и длинным текстом заставляет Chrome вертикально размещать элемент столбца под строкой, к которой он принадлежит.

В приведенном ниже фрагменте <div> с идентификатором,problem-div будет переносить и использовать всю строку, если к дочернему элементу <span> применен класс Boostrap 4 text-truncate и элемент содержит длинный текст.Удалите класс text-truncate, и элемент problem-div будет использовать неиспользованную часть первой строки в своем контейнере.

В нынешнем виде я могу получить функцию усечения для дочернего содержимого - или я могуполучить родительский столбец, чтобы заполнить неиспользованную часть первой строки его родителя, но не оба. Как получить оба одновременно? 

img {
  width: 16px;
  height: 16px;
}

label {
  margin: 0;
  font-weight: 600;
}

.form-text {
  margin: 0;
}

#problem-div {
  background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="container-fluid">

  ...
  <!-- lots of stuff -->

  <div class="card">
    <div class="card-header bg-warning">
      <div class="row">
        <div class="col-auto text-nowrap">
          <img src=".../icon.png" />
          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
        </div>
        <div class="col row small">
          <div class="form-group col-3">
            <label>ID</label>
            <span class="form-text">1234567</span>
          </div>
          <div class="form-group col-3">
            <label>Name</label>
            <span class="form-text">My Name</span>
          </div>
          <div class="form-group col-3">
            <label>Type</label>
            <span class="form-text">Category-A</span>
          </div>
          <div class="form-group col-3">
            <label>Code</label>
            <span class="form-text">ABCDEFG</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
        </div>
        <div class="col small">
          <!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
          <div id="problem-div" class="text-truncate">
            <label>Display Field Label</label>
            <span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  ...
  <!-- more stuff -->

</body>

1 Ответ

0 голосов
/ 05 декабря 2018

Если элемент flex содержит дочерние элементы с текстом, который должен быть усечен, макет может быть поврежден.

Мое первое решение - добавить min-width: 0 к родительскому элементу problem-div (взгляните на трюк cssстатья: https://css -tricks.com / flexbox-усеченный текст / ): 

img {
  width: 16px;
  height: 16px;
}

label {
  margin: 0;
  font-weight: 600;
}

.form-text {
  margin: 0;
}

#problem-div {
  background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="container-fluid">

  ...
  <!-- lots of stuff -->

  <div class="card">
    <div class="card-header bg-warning">
      <div class="row">
        <div class="col-auto text-nowrap">
          <img src=".../icon.png" />
          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
        </div>
        <div class="col row small">
          <div class="form-group col-3">
            <label>ID</label>
            <span class="form-text">1234567</span>
          </div>
          <div class="form-group col-3">
            <label>Name</label>
            <span class="form-text">My Name</span>
          </div>
          <div class="form-group col-3">
            <label>Type</label>
            <span class="form-text">Category-A</span>
          </div>
          <div class="form-group col-3">
            <label>Code</label>
            <span class="form-text">ABCDEFG</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
        </div>
        <div class="col small" style="min-width: 0">
          <!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
          <div id="problem-div" class="text-truncate">
            <label>Display Field Label</label>
            <span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  ...
  <!-- more stuff -->

</body>

Другим решением является добавление overflow: hidden к родительскому элементу problem-div: 

img {
  width: 16px;
  height: 16px;
}

label {
  margin: 0;
  font-weight: 600;
}

.form-text {
  margin: 0;
}

#problem-div {
  background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<body class="container-fluid">

  ...
  <!-- lots of stuff -->

  <div class="card">
    <div class="card-header bg-warning">
      <div class="row">
        <div class="col-auto text-nowrap">
          <img src=".../icon.png" />
          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
        </div>
        <div class="col row small">
          <div class="form-group col-3">
            <label>ID</label>
            <span class="form-text">1234567</span>
          </div>
          <div class="form-group col-3">
            <label>Name</label>
            <span class="form-text">My Name</span>
          </div>
          <div class="form-group col-3">
            <label>Type</label>
            <span class="form-text">Category-A</span>
          </div>
          <div class="form-group col-3">
            <label>Code</label>
            <span class="form-text">ABCDEFG</span>
          </div>
        </div>
      </div>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
          <h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
        </div>

        <!-- New CSS style -->
        <div class="col small" style="overflow: hidden;">
          <!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
          <div id="problem-div" class="text-truncate">
            <label>Display Field Label</label>
            <span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  ...
  <!-- more stuff -->

</body>

Надеюсь, эта помощь.

...