可变大小裁剪字段的纯 CSS 格式

Question

我有一个文本字符串和一个数字 ID，我想将它们并排显示：

This is a String [123]

看起来很简单，但我无法控制字符串或字符串的长度我要放入的容器的大小。第一个挑战是让它们彼此相邻排列，我使用了我在 SO 上找到的一个技巧：

<div>
    <div class="display_field">
        <div class="label">This is a long string that should be cropped.</div>
        <div class="id">[123]</div>
    </div>
</div>

应用此 CSS，我得到两个彼此相邻的字符串：

* { font-size: 12px; }  /* Just for testing. */

.label, .id {
    display: table-cell;
}

现在我可以显示这是一个应该被裁剪的长字符串。 [123]

问题是如果最外面的 DIV 是一个太小的固定宽度（通常是这样）：

<div style="width:125px;"> <!-- Just testing, I have no control over this guy. -->
    <div class="cropped_field">
        <div class="label">This is a long string that should be cropped.</div>
        <div class="id">[123]</div>
    </div>
</div>

输出现在看起来像这样：

This is a long string  [123]
that should be
cropped.

我想要的是 This is a long string [123]

我已经尝试了我能想到的一切，将 DIV 的高度设置为 12px（因此它与字体高度匹配）并将溢出设置为隐藏，使用成熟的表格，我什至考虑使用 Flash 。我已经尝试了很多选择 - 到目前为止我已经花了三四个小时。

我通过谷歌搜索并找到了有用的帖子，得到了很多有用的答案，我决定加入并尝试问我自己的问题。

有几件事需要注意（不确定这些是否会伤害或帮助情况）：

• 我无法控制 ID 的值，它可能是 [1] 或 [9999999] - 我不想硬 -编码该宽度（或“display_field”或“标签”）。即使是百分比也会导致问题。

• 此环境可能未启用 JavaScript（我希望，我会使用 jQuery 插件！）

• 容器可能是任何类型的标签，但通常是DIV。我实际上无法控制“显示”字段”之外的标记。

• 我控制“显示字段”的标记，并且可以使用 SPAN 标记或任何其他完成工作的 HTML。

• 我只是为 FireFox（需要 3）和 Chrome 编写此内容，不需要与其他蹩脚浏览器兼容（是的，我正在看你的 IE）。

• “id”字段始终是方括号中的数字，因此无需担心空格。

• 无需在裁剪文本结束处添加省略号。这是一个很好的功能，但我没有看到任何方法让它在 FireFox 上工作（3.x 有一个 hack，但版本 4 没有）。

Answer 1

下面的怎么样？它主要基于您提供的摘录。

.cropped_field
{
    height:1.4em;
    overflow:hidden;
}

看一下演示小提琴。