我有一个组件，其中Bootstrap 4自动扩展列正在包装到另一行。具有"text truncate"类和长文本的元素的存在导致Chrome将column元素垂直堆叠在其所属的行下。
在下面的代码段中，如果子<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>当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>希望得到帮助。