Question

我无法在网上找到问题的解决方案。我的问题是：说我有三个要素： div＃容器，宽度不一。容器包含两个元素 - 具有未知宽度的div＃文本和具有固定宽度的div＃img。这两个元素都是内联的：

<div id="container" style="width:auto">
    <div id="text"> some varying text here... </div>
    <div id="img" style="width: 10px; background: url(img.png)">
</div>

文本的样式位于某处：

#text { width:auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

我希望图片的位置靠近文字，但最多位于容器最右边的边框，如图片here

所示

有没有办法在不使用javascript 的情况下实现此？虽然容器会动态附加到文档中，因此无法使用宽度计算。

提前致谢

Answer 1

找到答案。花了我很多时间，把我带到CSS最黑暗的角落。然而，我已经开悟了 - 答案很简单......

<div id="container" style="width:auto">
    <div id="text"> some varying text here... </div>
    <div id="img" style="width: 10px; background: url(img.png)">
</div>

和CSS：

#text { 
    width:auto; 
    max-width: 100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 

    padding-right: 10px;
    margin-right: -10px;
    box-sizing: border-box;
}

如图所示in this fiddle

Answer 2

这与我的要求一样接近：

Fiddle

不幸的是，由于text-overflow: ellipsis的行为，如果不设置最大宽度，很难获得所需的行为。然后，图像不会在较短的文本块旁边。正如您在我的示例中所看到的，选项为text-align: right。

将文本放在右侧会容易得多： Fiddle

用于最大内嵌图像缩进的CSS技巧

2 个答案: