我的HTML页面的标题部分中有一行包含图标/文本/时间戳。我希望该行的图标和时间戳保持固定的宽度,当浏览器调整大小时,我想通过显示省略号来减小文本div(表格单元格)的大小。虽然我可以使用固定宽度显示省略号,但我希望文本div(table-cell)的宽度为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>
答案 0 :(得分:3)
text-overflow: ellipsis
仅在您设置white-space: nowrap