Ellipsis in card header

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.

Ellipsis will come with a fixed width, you can't make it work in another way. — SMAKSS, Jul 28 '20 at 07:19

jdickel · Accepted Answer · 2020-07-28T07:31:16.993

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>

But why are left and right part displayed in multiple lines now (https://imgur.com/09dT1to)? I want them all to be in one line. — Sam Carlson, Jul 28 '20 at 07:26
Added `.text-nowrap` to both outer span to prevent a line-break and adjusted my answer. The default behaviour of all texts is the line-break. — jdickel, Jul 28 '20 at 07:32

Ellipsis in card header

1 Answers1