Question

我有以下布局：

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

第一个标题包含动态内容，第二个标题具有固定的宽度设置。

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

我一直遇到的问题是，一旦我创建第一个div inline或float，它的宽度不再保持父级包含，使文本溢出到处，或者溢出设置为隐藏，我无法得到第二个标题与它位于同一行。

P.S。：不幸的是，这将需要支持尽可能多的旧浏览器，回到I.E. 6将是最好的（/ barf）但是尽可能多的解决方案将是最有价值的。谢谢你！

Answer 1

如果我理解正确的问题，可以使用flexible boxes轻松实现：

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

JSBin

Answer 2

如果我正确理解了这个问题，以下JSFiddle可能会有解决方案： http://jsfiddle.net/modenadude/QntUm/2/

代码：

保持两个<h2>内嵌
如果第一个<h2>的宽度比第二个<h2> + <article>的宽度宽，则会将椭圆添加到第一个<h2> < / LI>

为了以防万一，我在max-width上设置了<h2>（至50％），并添加outline以清楚地显示宽度。

我使用jQuery来计算<h2> onload的宽度，但使用getElementByID可以用纯JS完成相同的操作（如果你这样做，我也可以设置它） d喜欢）。当然，它仅用于两个<h2>和一个<article>，因此简单的编辑可以使其更具扩展性。

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

2 个答案: