如何使內嵌省略號溢出

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。