Html 如何使用省略号溢出生成内联扩展标头

我有以下布局：

<article>
    <h3><a>...</a></h3>
    <h3><a>...</a></h3>
</article>

...
...

第一个标题具有动态内容，第二个标题具有固定宽度集

我希望标题是内联的，当第一个标题的内容增长时，它会拉伸，直到两个标题的宽度之和为100%，然后溢出文本将被省略号

我遇到了这样的问题：一旦我将第一个div设置为inline或float，它的宽度就不再由父级控制，文本到处溢出，或者溢出设置为hidden，我就无法将第二个头与它放在同一行上

---

注：不幸的是，这将需要支持尽可能多的旧浏览器，返回到I.E.6将是最好的（/barf），但无论哪种解决方案到达尽可能远，都将是最有价值的。谢谢你

如果我正确理解了这个问题，以下JSFIDLE可能有解决方案：

守则：

• 使两个
  保持内联
• 如果第一个
  的宽度大于第二个
  +
  的宽度，它会将省略号添加到第一个

为了以防万一，我在

s上设置了

max width

（设置为50%），并添加了

outline

，以清晰地显示宽度

---

我使用jQuery计算

s onload的宽度，但是使用纯JS也可以通过

getElementByID

（如果您愿意，我也可以进行设置）。当然，它被设计为只在两个

和一个

上使用，因此简单的编辑可以使它更具可扩展性。

如果我正确理解这个问题，可以通过以下方法轻松实现：

---

.

太糟糕了。@NielsKeurentjes您正在寻找的浏览器支持是什么？这实际上取决于@Charles的目标浏览器。据我们所知，他还可以为NodeWebKit开发新的应用程序。Firefox和IE10一样使用旧的实现。现在，简而言之，只有不到50%的普通浏览器支持它，只有不到75%的浏览器支持它。虽然您的示例在“旧实现”中实际上可以很好地工作，但我的书中有75%还没有“适合生产部署”。应该在半年内。不幸的是，用户群很老，所以我需要支持尽可能旧的浏览器@Klaster_1我真的很喜欢看到如何以现代的方式完成这项工作，谢谢你的回答这是一个很好的尝试，尽管我希望得到一个纯CSS的答案，宽度限制并不是我想要的。

article {
  display: inline-flex;
  width: 100%;
}
article > h3:nth-child(1) {
  flex: 1;
}
article > h3:nth-child(2) {
  flex: 0 0 150px;
}
a {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}