In my Bootstrap 4 project, I am aiming to design a card header with three distinct parts.
- The left part will showcase the author.
- The middle section will present a preview of the content.
- The right part will display the date.
Specifically, I want the middle part to be cut off with an ellipsis if it exceeds the available space. It should extend from the left to the right part with a margin of ml-5 and mr-5. The content should be in a single line.
Below is the snippet of code I have been working on:
<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;">
(Content Preview)
</span>
<span class="float-right">
10-Mar-2020
</span>
</div>
<div class="card-body">
This is card content.
</div>
</div>
</div>
</div>
</div>
Preview:
https://i.sstatic.net/6AuMd.png
Adding a fixed width: 300px to the middle part makes the ellipsis display correctly. However, I prefer a flexible width.