如何使内嵌省略号溢出

Question

扩展报头，我得到了以下布局：

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

第一头有动态内容，第二个有一个固定的宽度设定。

我想要标题是内联的，并且当第一个内容增长时，它将延伸到两个标题宽度的总和为100％，然后溢出文本为省略号。

我一直在遇到问题，一旦我做第一个div内联或浮动，其宽度不再保持包含父，使文本溢出无处不在，或溢出设置为隐藏，我无法获得第二个标题与它位于同一行。

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

Answer 1

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

代码：

• 保持两个<h2>小号直列
• 如果的宽度第一个<h2>变得比第二个的宽度宽度更宽，它将椭圆添加到第一个<h2>

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

我用jQuery来找出<h2>的onload的宽度，但同样可以用纯JS使用getElementByID来完成（我可以设置了太多，如果你想）。当然，它只能用于两个<h2>和一个<article>，所以简单的编辑可以使其更具可扩展性。

Answer 2

如果我理解正确的问题，这是很容易实现与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。