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

Question

我的 HTML 页面的 header 部分有一行由图标/文本/时间戳组成。我想让该行的图标和时间戳保持固定宽度，并且当浏览器调整大小时，我想通过显示省略号来减小文本 div(表格单元格)的大小。虽然我可以让省略号以固定宽度出现，但我希望文本 div(表格单元格)的宽度为 100%，直到浏览器变小，然后我希望这个文本 div 变小，省略号显示为这个 div 收缩。

我可以使用媒体查询或动态调整大小的指令来解决这个问题，但我希望 HTML/CSS 可以解决它。

这可能吗？

这是一个示例:http://jsfiddle.net/em83B/

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

Answer 1

text-overflow: ellipsis 仅当您还设置了 white-space: nowrap

时才有效