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

Question

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

在下面的代码片段中，如果子 <span> 元素具有 Boostrap 4 class text-truncate 已应用且元素包含冗长的文本。删除 text-truncate class 和 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>

Answer 1

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

我的第一个解决方案是将 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>

希望对您有所帮助。

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

Prevent Bootstrap 4 auto-fill column from wrapping to next row

css

grid-layout

bootstrap-4