Html 卡片标题中的省略号

我正在使用Bootstrap4，我想创建一个由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>

约翰·塞德
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的证明。花叶相思，花叶相思，花叶相思，花叶相思，花叶相思。所有的苏打水，所有的苏打水，所有的苏打水，所有的苏打水，都在我们最需要的地方。tempus中的Pellentesque pharetra lobortis sem。莫比·图皮斯·利奥，埃利芬德的朗卡斯，佩伦茨克·内克·梅特斯。Maecenas commodo scelerisque pellentesque。奥古斯都的朗卡斯在埃吉斯塔。但是，我们只能坐在我们家里。拉西尼亚库拉比图尔·德米特·韦利特·亨德雷特怀孕了。这是一个奥奇·奎斯·埃尼·亚库利斯·乌尔特里斯。两种情况都很复杂，一种是乌拉姆·科珀·图尔皮斯·拉齐尼亚（ullamcorper turpis lacinia）。努克在拉齐尼亚的托尔托尔。Pellentsque nec nibh ut est consequat调味品级别ut velit。拉齐尼亚生命中的元素相位。无主与无主之对决，一个老街。
2020年3月10日
这是卡片内容。

预览：

---

例如，如果我在中间部分添加

width:300px

，它将正确显示省略号。但是，宽度是固定的，这不是我想要的。

您可以将

d-flex

添加到父容器中。 阅读d-flex

我还建议删除浮动，因为这里不需要它。您可以选择使用flexbox来代替。浮动会破坏布局，必须清除

编辑：为了防止左右跨距打断成新行，您应该从中添加

.text nowrap

类

约翰·塞德
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的证明。花叶相思，花叶相思，花叶相思，花叶相思，花叶相思。所有的苏打水，所有的苏打水，所有的苏打水，所有的苏打水，都在我们最需要的地方。tempus中的Pellentesque pharetra lobortis sem。莫比·图皮斯·利奥，埃利芬德的朗卡斯，佩伦茨克·内克·梅特斯。Maecenas commodo scelerisque pellentesque。奥古斯都的朗卡斯在埃吉斯塔。但是，我们只能坐在我们家里。拉西尼亚库拉比图尔·德米特·韦利特·亨德雷特怀孕了。这是一个奥奇·奎斯·埃尼·亚库利斯·乌尔特里斯。两种情况都很复杂，一种是乌拉姆·科珀·图尔皮斯·拉齐尼亚（ullamcorper turpis lacinia）。努克在拉齐尼亚的托尔托尔。Pellentsque nec nibh ut est consequat调味品级别ut velit。拉齐尼亚生命中的元素相位。无主与无主之对决，一个老街。
2020年3月10日
这是卡片内容。

省略号将带有固定的宽度，您无法以其他方式使其工作。但为什么现在左右部分显示为多行（）？我希望它们都在一行中。将

.text nowrap

添加到两个外部跨距以防止换行，并调整了我的答案。所有文本的默认行为都是换行。