Css 如何在浏览器调整大小时截断div或单元格中的文本

我的HTML页面的标题部分有一行由图标/文本/时间戳组成。我希望此行的图标和时间戳保持固定宽度，并且当浏览器调整大小时，我希望通过显示省略号来减小文本div（表格单元格）的大小。虽然我可以使省略号以固定宽度显示，但我希望文本div（表格单元格）的宽度为100%，直到浏览器变小，然后我希望此文本div变小，省略号随着此div的缩小而显示

我可以通过媒体查询或动态调整大小的指令来解决这个问题，但我希望HTML/CSS能够解决这个问题

这可能吗

以下是一个示例：

AAA
这是我希望在浏览器调整大小时截断的文本
CCC

文本溢出：省略号仅当您还设置了
空白：nowrap
文本溢出：省略号仅当您还设置了
空白：nowrap
文本溢出：省略号仅当您还设置了
空白：nowrap
文本溢出：省略号
仅当您还设置了
空白：nowrap
谢谢。我已经在中间div的样式中有了它（我想要调整大小的那个）。我假设它不需要位于本例中的任何其他位置。您还需要在具有
display:table
的div上设置一个宽度（只要
table layout:fixed
，它在您的小提琴中被注释掉，并被恢复）。不过，它也会放大其他列的大小。所以也为它们设置合适的宽度。谢谢。我已经在中间div的样式中有了它（我想要调整大小的那个）。我假设它不需要位于本例中的任何其他位置。您还需要在具有
display:table
的div上设置一个宽度（只要
table layout:fixed
，它在您的小提琴中被注释掉，并被恢复）。不过，它也会放大其他列的大小。所以也为它们设置合适的宽度。谢谢。我已经在中间div的样式中有了它（我想要调整大小的那个）。我假设它不需要位于本例中的任何其他位置。您还需要在具有
display:table
的div上设置一个宽度（只要
table layout:fixed
，它在您的小提琴中被注释掉，并被恢复）。不过，它也会放大其他列的大小。所以也为它们设置合适的宽度。谢谢。我已经在中间div的样式中有了它（我想要调整大小的那个）。我假设它不需要位于本例中的任何其他位置。您还需要在具有
display:table
的div上设置一个宽度（只要
table layout:fixed
，它在您的小提琴中被注释掉，并被恢复）。不过，它也会放大其他列的大小。所以也为它们设置适当的宽度。我最后用引导列解决了这个问题。我将图标和文本放在一个div中class=“col-xs-10 col-sm-9 col-md-8 col-lg-7”，然后将时间戳放在另一个div中class=“col-xs-2 col-sm-3 col-md-4 col-lg-5”。这似乎足够好，但并不完美。如果有更好的建议，我愿意听听。我最后用引导列解决了这个问题。我将图标和文本放在一个div中class=“col-xs-10 col-sm-9 col-md-8 col-lg-7”，然后将时间戳放在另一个div中class=“col-xs-2 col-sm-3 col-md-4 col-lg-5”。这似乎足够好，但并不完美。如果有更好的建议，我愿意听听。我最后用引导列解决了这个问题。我将图标和文本放在一个div中class=“col-xs-10 col-sm-9 col-md-8 col-lg-7”，然后将时间戳放在另一个div中class=“col-xs-2 col-sm-3 col-md-4 col-lg-5”。这似乎足够好，但并不完美。如果有更好的建议，我愿意听听。我最后用引导列解决了这个问题。我将图标和文本放在一个div中class=“col-xs-10 col-sm-9 col-md-8 col-lg-7”，然后将时间戳放在另一个div中class=“col-xs-2 col-sm-3 col-md-4 col-lg-5”。这似乎足够好，但并不完美。如果有更好的建议，我愿意听听。
<div style="display: table; table-layout: fixed;">
    <div style="display: table-cell; background: pink; min-width: 60px;">
        AAA
    </div>

    <div style="display: table-cell; background: yellow; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; min-width: 300px; max-width: 600px;">
        This is the text I want to have truncated as the browser resizes
    </div>

    <div style="display: table-cell; background: lightblue; min-width: 100px;">
        CCC
    </div>
</div>