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。我已经尝试了很多选择 - 到目前为止，我已经在这里待了三四个小时。

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

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

我无法控制ID的值，它可能是[1]或[9999999] - 我不想硬编码它的宽度（或“display_field”或“标签“就此而言。即使是百分比也会导致问题。
此环境可能未启用JavaScript（我希望，我会使用jQuery插件！）
容器可能是任何类型的标记，但通常是DIV。我实际上并没有控制“显示”字段之外的标记“。
我控制“display_field”的标记，并且可以使用SPAN标记或任何其他完成工作的HTML。
我只是为FireFox写的（需要3个）和Chrome，没有必要与糟糕的浏览器兼容（是的，我在看IE）。
“id”字段始终是方括号中的数字，因此无需担心空格。
无需将省略号放在裁剪文本结束的位置。这是一个很好的功能，但我没有看到任何方法让它在FireFox上工作（有一个3.x的黑客，但版本4没有。）

Answer 1

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

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

查看demo fiddle。

CSS-only格式化可变大小的裁剪字段

1 个答案: