卡头中的省略号

Question

我正在使用 Bootstrap 4，我想创建一个包含 3 个部分的卡头。

1. 左侧显示作者。
2. 中间部分显示内容预览。
3. 右侧部分显示日期。

我希望中间部分在到达可用空间末尾时用省略号切断。因此，中间部分应该从左到右跨越，边距为ml-5 和mr-5。如果内容长于可用宽度，则应显示省略号。所有 3 个部分必须在一行中。

到目前为止，这是我的代码：

<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>

预览：

如果我在中间部分添加例如width: 300px，它会正确显示省略号。但是，宽度是固定的，这不是我想要的。

Answer 1

您可以将d-flex 添加到父容器。 阅读 d-flex here

我还建议删除浮动，因为这里不需要它。你 always want to avoid float whenever possible 并使用 flexbox 代替。浮动会破坏您的布局，必须清除。

编辑：为防止左右跨度进入新行，您应该从 Bootstrap Utility 添加 .text-nowrap 类。

<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>