Flex/Nowrap not working with first column and text-truncate in bootstrap

Question

I can't seem to get the first column not to wrap, the CDT keeps going to the second row. The second column has a text truncate on it. How can I get the first column to expand so the column never wraps.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
<div class="mr-1 flex-nowrap" data-bind="html: TimeFormatted">
    9:05 AM CDT
</div>
<div class="d-flex text-truncate">
    @
    <span class="text-truncate mx-1" data-bind="text: VenueName">
        ACA  dsf asdf sdsadf d fsd fsd fsd fsa
    </span>
    (<span data-bind="text: CourtName">East</span>)
</div>
</div>

score 4 · Accepted Answer · answered Oct 09 '20 at 13:08

4

Use flex-shrink: 0

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
        <div class="mr-1 flex-shrink-0 flex-nowrap" data-bind="html: TimeFormatted">9:05 AM CDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1" data-bind="text: VenueName">ACA  dsf asdf sdsadf d fsd fsd fsd fsa</span> (<span data-bind="text: CourtName">East</span>)</div>
    </div>

answered Oct 09 '20 at 13:08

dantheman

3,189
2
10
18

Wow I thought I already did that but guess not. – Mike Flynn Oct 09 '20 at 13:09
You is my hero!!! \O/ \O/ \O/ – elciospy Feb 22 '22 at 17:11

score 1 · Answer 2 · answered Oct 09 '20 at 13:08

The wrap of the first div is the text-wrap so to avoid it, it is needed to set white-space: nowrap; to make text not wrapped.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
  <div class="mr-1 flex-nowrap" data-bind="html: TimeFormatted" style="white-space: nowrap;">9:05 AM CDT</div>
  <div class="d-flex text-truncate">@<span class="text-truncate mx-1" data-bind="text: VenueName">ACA  dsf asdf sdsadf d fsd fsd fsd fsa</span> (<span data-bind="text: CourtName">East</span>)</div>
</div>

Flex/Nowrap not working with first column and text-truncate in bootstrap

2 Answers2