当浏览器调整大小时，如何截断div或单元格中的文本 [英] How can I truncate text in a div or cell as the browser resizes

问题描述

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

I have a row consisting of icon/text/timestamp in the header section of my HTML page. I want to have the icon and the timestamp of this row remain at a fixed width, and when the browser resizes, I want to reduce the size of the text div (table-cell) by having an ellipsis appear. While I can get the ellipsis to appear with a fixed width, I want the width of the text div (table-cell) to be 100% until the browser gets smaller, then I want this text div to get smaller and for the ellipsis to appear as this div shrinks.

我可以通过媒体查询或动态调整大小的指令解决此问题，但我希望HTML / CSS可以解决该问题。

I could solve this problem with media queries, or a directive to resize dynamically, but I was hoping that HTML/CSS could solve it.

这可能吗？

这里是一个示例： 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>

推荐答案

文本溢出：省略号仅在还设置了 white-space：nowrap

这篇关于当浏览器调整大小时，如何截断div或单元格中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！