Question

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

在下面的代码段中，如果子<div>元素应用了Boostrap 4类problem-div且ID为<span>的{{1}}将包装并占用整行元素包含冗长的文本。删除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;
}

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

希望获得帮助。

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

1 个答案: