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

Question

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

这是一个字符串 [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。我已经尝试了很多选择 - 到目前为止，我已经在这方面工作了三四个小时。

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

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

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

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

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

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

• 我只是为 FireFox（需要 3 个）和 Chrome 编写这个，不需要与糟糕的浏览器兼容（是的，我在看你的 IE）。

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

• 无需在裁剪文本的结尾处添加省略号。这是一个不错的功能，但我看不出有任何方法可以让它在 FireFox 上运行（有 3.x 的 hack，但版本 4 没有）。

Answer 1

下面的呢？它主要基于您提供的摘录。

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

看看demo fiddle。