Bootstrap text does not truncate when using flexbox

Question

I'm working on a Bootstrap card using flexbox and can't get text truncation to work. The card text wraps as expected, however, the card title does not truncate when there is not enough space, instead it pushes content outside the card (see screenshot).

Can anyone explain why that happens?

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card d-flex flex-row">
        <a href="#">[Image]</a>
        <div class="card-body d-flex align-items-center">
          <div class="flex-grow-1">
            <a href="#"><h5 class="card-title text-truncate">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h5></a>
            <div class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
          </div>
          <small class="align-self-baseline text-nowrap">Lorem ipsum</small>
          <div>[Icon]</div>
        </div>
      </div>
    </div>
  </div>
</div>

See example on jsfiddle

Clevelandclevenger

Answer 1

I don't know if it's a bug or a feature to be honest, but it seems that flexbox and text truncation don't play well together.

Without this (min-width), the flex child containing the other text elements won't narrow past the "implied width" of those text elements.

In your particular case I set min-width: 0 to both the .card-body and .flex-grow-1 classes.

jsfiddle

Outspread

Thanks a lot. I saw some posts mentioning min-width: 0 but wasn't able to make it work. Is it just needed on both because I have the text nested one more level compared to your linked example? – Clevelandclevenger

My guess is that you'd need it on each flex child. In the example posted, both .card-body and .flex-grow-1 are flex children. .card-body is a child of .card .d-flex, and .flex-grow-1 is a child of .card-body .d-flex. So, if that extra nested element is inside another element with a display of flex, then yeah, you should probably add the min-width as well. – Outspread

God thank you, you saved me after hours of research – Rheotropism

Answer 2

Add flex-body in the flex-grow-1 div:

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card d-flex flex-row">
        <a href="#">[Image]</a>
        <div class="card-body d-flex align-items-center">
          <div class="flex-grow-1">
           <div class="flex-body">
             <a href="#"><h5 class="card-title text-truncate">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h5></a>
             <div class="card-text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</div>
          </div>
          <small class="align-self-baseline text-nowrap">Lorem ipsum</small>
          <div>[Icon]</div>
        </div>
       </div>
      </div>
    </div>
  </div>
</div>

Blus

This makes the truncation work but places the <small> and icon <div> on a new line since they are no longer children of the inner flexbox. – Clevelandclevenger

display:inline them / put a max-width on the long text container. – Blus

Answer 3

It's possible to make it work if use .overflow-hidden on the flex container.

Glycol