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

Question

i在我的HTML页面的标题部分中有一个由图标/文本/时间戳组成的行。我想让这一行的图标和时间戳保持固定宽度，并且当浏览器调整大小时，我想通过出现省略号来减少文本div（table-cell）的大小。虽然我可以使省略号以固定宽度出现，但我希望文本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