Question

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

.complete{ max-width: 300px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right:10px; }

这样做的一个例子是：

这是一个团体...... 纽约

其中'这是一个组'是截断的文本，而纽约是我想要的文本'这是一个组...'。所以看起来应该是这样的：

这是一个团体......纽约

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

有什么想法吗？谢谢你的支持！

Answer 1

使用两个元素：

<div>
    Stuff stuff woohoo I'm typing stuff
</div>
<div>
    Yay
</div>

*
{
    font-size: 0;
}

div
{
    display: inline-block;
    text-overflow: ellipsis;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;

    font-size: 16px;
}

JSFiddle

Answer 2

演示 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>

如何在CSS中的省略号文本溢出旁边（右侧）添加文本？

2 个答案:

JSFiddle