带有文本溢出的表列：省略号和除此之外的数字

Question

我有一个包含列width: auto的表格。它包含一个文本，当它不适合列时，由省略号缩短。

现在，我想在文本旁边添加一个数字。但是，我仍然希望文本在太长时间内缩短，但无论如何都必须显示该数字。以下是我想要完成的一些例子。

还要求号码始终保持在文本附近。通过设置文本div.text { width: 95% }，我可以在数字处于固定位置时使其工作，但这并不完全令人满意。

请看看JSFiddle来了解这个想法：http://jsfiddle.net/ZRZfk/。 JSFiddle不能按照我的意愿工作，因为文本的宽度是固定的。

是否可以在不使用JS的情况下解决此问题？

Answer 1

使用max-width代替width Demo

Answer 2

我认为更换宽度：最大宽度为95％：95％可以满足您的需求吗？演示here

.text {
    max-width:95%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

Answer 3

您几乎可以在整个单元格中使用::before和width的技巧。

.text::before{
    content:'… (1)';
    position: absolute;
    display: inline-block;
    color: gray;
    left: 70%;
    background: pink;
}

• JSFiddle