在 HTML 行文本被右对齐内容遮盖之前溢出
我有一些文本显示在具有固定宽度的容器中的单行上。 如果文本不能包含在容器的宽度内，则溢出将被隐藏。 三个状态图标的任意组合可能会出现在容器的右侧。 如果出现任何这些图标，我希望在第一个图标出现之前隐藏文本溢出，以便文本不会在图标后面显得模糊。
如何使文本溢出，使其不会在图标下流动（理想情况下仅使用 CSS，而不需要诉诸 JavaScript）？
我开始使用的 CSS 和 HTML 示例（两者都不是）其中具体设定）如下。 这是一个代码的实时示例，它也说明了所需的结果（注意它有一个嵌入在 CSS 中的背景图像）使用数据 URI 方案，因此不适用于 Internet Explorer 8 之前的版本。
CSS：
.line {
position: relative;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.star, .circle, .flag {
position: absolute;
top: 3px;
height: 23px;
width: 15px;
background-image: url(icons.png);
}
.star {
right: 30px;
}
.circle {
right: 15px;
background-position: -17px 0;
}
.flag {
right: 0;
background-position: -32px 0;
}
HTML：
<div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div>
</div>
I've got some text that is displayed on a single line in a container that has a fixed width. If the text can't be contained within the width of the container the overflow is hidden. Any combination of three status icons may appear positioned from the right hand side of the container. If any of these icons appear I'd like the text overflow to be hidden before the first icon appears so the text does not appear obscured behind the icons.
How can I overflow the text so it doesn't flow under the icons (ideally using only CSS and not needing to resort to JavaScript)?
An example of the CSS and HTML I've started from (neither of which are set in concrete) follows. Here's a live example of the code which also illustrates the desired result (note it has an background image inlined in the CSS using the data URI scheme so won't work in versions of Internet Explorer earlier than 8).
CSS:
.line {
position: relative;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.star, .circle, .flag {
position: absolute;
top: 3px;
height: 23px;
width: 15px;
background-image: url(icons.png);
}
.star {
right: 30px;
}
.circle {
right: 15px;
background-position: -17px 0;
}
.flag {
right: 0;
background-position: -32px 0;
}
HTML:
<div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div>
</div>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
您可以直接在包含文本的 div 中使用背景图像，并使用填充来为图标释放一些空间。
编辑：
这是一个工作示例，但我无法让“nowrap”工作，所以我通过使用高度进行作弊：
似乎您必须使用单个图像而不是精灵，但您可以直接将填充添加到星形、圆形和旗帜级。
You could make use the background image directly in the div that contains the text and use padding to free some space for the icons.
EDIT:
Here is a working example, but I couldn't get "nowrap" to work, so I cheated by using a height:
And it seems like you have to use single images instead of sprites, but you could add the padding directly to the star, circle and flag class.
也许我没有正确理解你的意思，但是将 .star、.circle、.flag 的背景颜色简单地设置为“白色”并在它们上使用“z-index”怎么样？ 可以这么说，这当然是一个黑客，但也许对你有用。
更新
刚刚根据您的代码进行了尝试。 仅适用于 FF、Opera、IE8：
Maybe I don't understand you correctly, but what about setting the background-color of .star, .circle, .flag simply to "white" and use "z-index" on them? It certainly is a hack so to speak, but maybe will work for you.
Update
Just made an attempt based on your code. Only working on FF, Opera, IE8:
您的问题是您希望根据特定类型的子级标记的数量影响父级标记的呈现。 如果没有一些程序性干预，这是不可能的。
如果您以编程方式生成这些列表，我建议只添加三个类来指定外部
div的线宽：否则，您最好的选择可能是使用 Javascript 动态缩小框。
Your problem is that you want to affect the rendering of a parent tag based on the number of its children of a particular type. That's just not possible without some programmatic intervention.
If you're programmatically generating these lists, I'd suggests just adding three classes which specify the width of the line to the outer
div:Otherwise, your best option might be to use Javascript to dynamically shrink the boxes.
让这些图标影响文本宽度的最简单方法是将它们放在它前面（无论如何它们都是绝对定位的），并给文本本身一个容器（我很确定你需要它，无论你采取哪种方式）。 所以你最终会得到这样的结果：
这是你需要的唯一新的 CSS（除了问题中的 CSS 之外）：
.text规则与.line 相同div您用于自己的工作示例。 真正的“魔力”发生在最后的规则中，它们是我将图像 div 向上移动的原因。 这允许您使用 CSS3 同级选择器 来设置.text 的宽度div 基于图标的存在。 您可以简单地让 CSS 级联通过按从右到左的顺序列出图标类来处理宽度。顺便说一句，我不得不说这里有相当多的 div，所以没有任何迹象表明它的实际含义。 您首先关心的应该始终是创建语义 HTML。
我可能想将文本放在段落标签中，将图标放在列表中，并为每个列表项提供文本描述（用 CSS 隐藏）。 话又说回来，也许这实际上并不合适（也许图标 div 确实应该出现在文本之后）； 我不知道。 如果图标出现在列表中，同级选择器将需要一些帮助......
The easiest way to be able to let those icons affect the width of the text is to have them precede it (they're absolutely positioned anyway), and to give text itself a container as well (I'm pretty sure you need that, whichever way you do it). So you end up with this:
Here's the only new CSS you need to make that work (in addition to the CSS in the question):
The
.textrule is the same as the.line divyou used for your own working example. The real "magic" happens in those last rules, and they're the reason I moved the image divs up. That allows you to use the CSS3 sibling selector to set the width of the.textdiv based on the presence of the icons. You can simply let the CSS cascade take care of the width by listing the icon classes in right-to-left order.As a side note, I do have to say that there are rather a lot of divs here, so there's no indication of what it actually means. Your first concern should always be to create semantic HTML.
I'd probably want to put the text in paragraph tags and the icons in a list, and give each list item a textual description as well (hiding it with CSS). Then again, maybe that's not actually appropriate (and maybe the icon divs should really come after the text); I can't tell. And if the icons go in a list, the sibling selector will need some help...
我无法评论Merkuro的回答和你的回应（太少了），所以我在这里添加：
您可以只使用不透明图像覆盖的线的占位符图像，这样，一旦放置，它将覆盖文本和线，但背景线似乎不间断，因为图像有一条线与图像对齐其背后的实线。 您可以使用
hover:在线条改变颜色等时切换图像（我目前能想到的最好的）此外，如果您使用仅带有一个符号（星形、圆形、旗帜）的单独图像）并用不透明的空白将图像向右填充到您想要覆盖的宽度，您会得到类似的东西（我尽了最大努力对base64图像进行编码，但它只适用于FF。CSS应该与正确链接的图像）。
CSS：
I can't comment on Merkuro's answer and your response (too few points), so I'm adding this here:
You could just use a placeholder image of the line covered by the opaque img so that, once placed, it'll cover the text and the line, but the background line is seemingly uninterrupted as the image has a line that aligns up neatly with the real line behind it. And you could use
hover:to switch images when the line changes colour, etc. (best I could think of at the moment)Also if you use seperate images with just one symbol (star, circle, flag) and pad the images to the right with opaque whitespace upto the width you want to cover, you'd have something like this (I did my best to encode the base64 images, but it only works in FF. The CSS should work correctly with proper linked images).
CSS: