css - 如何在 CSS 中的省略号文本溢出旁边(右侧)添加文本？

Question

我正在尝试使用省略号文本溢出，但它弄乱了我的布局。我有以下代码:

.完成{
最大宽度:300px；
空白:nowrap；
溢出:隐藏；
文本溢出:省略号；
右边距:10px；
}

所以这个例子是:

这是一组... 纽约

其中“This is a group”是截断的文本，New York 是我想要紧挨着“This is a group...”的文本。所以它应该是这样的:

这是一群......纽约

“纽约”在文本溢出之前显示在正确的位置，尽管“这是一个组”与它重叠。

有什么想法吗？提前致谢!

Answer 1

演示 http://jsfiddle.net/6d9gL/

您可以将文本包含在 inline-block 元素中，并将它们作为附件，就像在普通文本行中一样。

另请注意 vertical-align:middle; 的使用，它需要保持元素在一行中对齐。 (试试去掉属性看看效果)

CSS

.complete {
    display:inline-block;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align:middle;
}
.annexed {
    display:inline-block;
    vertical-align:middle;
}

HTML

<span class="complete">This is a group to test the ellipsis</span>
<span class="annexed">New York</span>