Ellipsis in card header - html

Question

I am using Bootstrap 4 and I want to create a card header which consists of 3 parts.
Left part displays author.
Middle part displays preview of the content.
Right part displays the date.
I want middle part to cut off with ellipsis when it reaches the end of available space. Middle part should, therefore, span from left to right part with margin ml-5 and mr-5. If content is longer than available width, it should display ellipsis. All 3 parts must be in one line.
Here is my code so far:
<div class="container">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-header">
<span class="float-left">
John Seed
</span>
<span class="ml-5 mr-5 text-muted" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus vitae magna id aliquam. Phasellus luctus ut ligula eu dignissim. Praesent sodales, nisi quis sodales euismod, enim ante suscipit ex, in cursus est metus nec sem. Pellentesque pharetra lobortis sem in tempus. Morbi turpis leo, rhoncus in eleifend id, pellentesque nec metus. Maecenas commodo scelerisque pellentesque. Suspendisse rhoncus at augue at egestas. Ut in erat ut justo tincidunt suscipit ac sit amet urna. Curabitur lacinia diam sit amet velit gravida hendrerit. Duis a orci quis enim iaculis ultrices. Duis finibus lorem et ipsum fringilla, feugiat ullamcorper turpis lacinia. Nunc vulputate in tortor ac lacinia. Pellentesque nec nibh ut est consequat condimentum vel ut velit. Phasellus elementum vel dui vitae lacinia. Nulla et placerat dui, a laoreet lectus.
</span>
<span class="float-right">
10-Mar-2020
</span>
</div>
<div class="card-body">
This is card content.
</div>
</div>
</div>
</div>
</div>
Preview:
If I add, for example, width: 300px to the middle part, it displays ellipsis correctly. However, width is fixed which is not something that I would like.

Answer 1

You can just add a d-flex to the parent container.
Read up on d-flex here
I'd also recommend to remove the float since it isn't needed here. You always want to avoid float whenever possible and use flexbox instead. Float can destroy your layout and has to be cleared.
Edit: To prevent the left and right span to break into a new line you should add the .text-nowrap class from Bootstrap Utility.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-header d-flex">
<span class="text-nowrap">
John Seed
</span>
<span class="ml-5 mr-5 text-muted" style="text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas finibus vitae magna id aliquam. Phasellus luctus ut ligula eu dignissim. Praesent sodales, nisi quis sodales euismod, enim ante suscipit ex, in cursus est metus nec sem. Pellentesque pharetra lobortis sem in tempus. Morbi turpis leo, rhoncus in eleifend id, pellentesque nec metus. Maecenas commodo scelerisque pellentesque. Suspendisse rhoncus at augue at egestas. Ut in erat ut justo tincidunt suscipit ac sit amet urna. Curabitur lacinia diam sit amet velit gravida hendrerit. Duis a orci quis enim iaculis ultrices. Duis finibus lorem et ipsum fringilla, feugiat ullamcorper turpis lacinia. Nunc vulputate in tortor ac lacinia. Pellentesque nec nibh ut est consequat condimentum vel ut velit. Phasellus elementum vel dui vitae lacinia. Nulla et placerat dui, a laoreet lectus.
</span>
<span class="text-nowrap">
10-Mar-2020
</span>
</div>
<div class="card-body">
This is card content.
</div>
</div>
</div>
</div>