I have a component where a Bootstrap 4 auto-expand column is wrapping to another row. The presence of an element with the "text-truncate" class and long text is causing Chrome to vertically stack the column element under the row where it belongs.
In the snippet below, the <div> with ID, problem-div will wrap and consume the whole line if the child <span> element has Boostrap 4 class text-truncate applied and the element contains lengthy text. Remove the text-truncate class and the problem-div element will consume the unused portion of the first row in its container.
As it stands now, I can get the truncation feature for the child content - or I can get the parent column to fill the unused part of the first row of its parent, but not both. How do I get 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>When a flex item contains child elements with text that should be truncated, layout can be broken.
My first solution is add min-width: 0 to problem-div's parent (take a look at css trick article: 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>Another solution is add overflow: hidden to problem-div's parent:
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>Hope this help.