-6

我在网上找不到解决问题的方法。我的问题是这样的：假设我有三个元素： div#container 具有不同的宽度。该容器包含两个元素 - 具有未知宽度的 div#text 和具有固定宽度的 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的情况下实现这一点？尽管容器是动态附加到文档中的，因此无法使用宽度计算。

提前致谢

4

2 回答 2

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;
}

如this fiddle所示

于 2013-08-07T09:45:40.607 回答
0

这与我收到您的申请一样接近：

Fiddle

不幸的是，由于 的行为text-overflow: ellipsis，在不设置最大宽度的情况下很难获得所需的行为。然后，图像不会靠近较短的文本块。text-align: right正如您在我的示例中看到的那样，一个选项就是这样。

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

于 2013-08-01T15:09:19.807 回答