可变大小裁剪字段的纯 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 .