I'm experiencing an issue with a component using Bootstrap 4 where a column is expanding to another row due to the presence of a long text element with the "text-truncate" class. This results in Chrome vertically stacking the column below its intended row.
In the code snippet below, if the child <span> element has the Bootstrap 4 class text-truncate applied and contains lengthy text, the <div> with ID problem-div will wrap and take up the entire line. Removing the text-truncate class will allow the problem-div element to fill the unused portion of the first row within its container.
Currently, I have to choose between enabling the truncation feature for the child content or getting the parent column to utilize the empty space on the first row, but can't achieve both simultaneously. How can I accomplish both at the same time?
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>