防止 Bootstrap 4 自动填充列换行到下一行答案

【问题标题】：Prevent Bootstrap 4 auto-fill column from wrapping to next row防止 Bootstrap 4 自动填充列换行到下一行
【发布时间】：2018-12-05 10:46:45
【问题描述】：

我有一个组件，其中 Bootstrap 4 自动扩展列正在换行到另一行。具有“text-truncate”类和长文本的元素的存在导致 Chrome 将列元素垂直堆叠在它所属的行下。

在下面的 sn-p 中，如果子 <span> 元素应用了 Boostrap 4 类 text-truncate 并且该元素包含冗长的文本，则 ID 为 problem-div 的 <div> 将换行并消耗整行。移除 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>

【问题讨论】：

标签： css bootstrap-4 grid-layout

【解决方案1】：

当一个 flex 项目包含带有应该被截断的文本的子元素时，布局可能会被破坏。

我的第一个解决方案是将min-width: 0 添加到problem-div 的父级（查看css 技巧文章：https://css-tricks.com/flexbox-truncated-text/）：

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>

希望对您有所帮助。

【讨论】：