內聯divs：收縮一個，隱藏另一個的溢出

Question

我有一個有趣的挑戰，讓兩個內聯文本元素以特定方式運行。這裏是我的參數：

• 左側將在寬度不一，從父寬度的約30-60％的正文。
• 右側的補充文本與父寬度的20-120％差異很大。
• 父寬度是響應式的，可以收縮到全寬的75％。絕對定位不會。
• 每當這兩個項目不適合，我想正文保持完全可見（沒有省略號）和補充文本隱藏溢出：
  • 溢出：隱藏
  • 文本溢出：省略號

兩個CSS和HTML是完全可以修改，但我寧願如果HTML保持語義。如果有這樣一個好方法，請隨意使用JS/jQuery。

http://jsfiddle.net/gksfwozz/1/

.outer { 
 
    width: 200px; 
 
    background-color: skyblue; 
 
    border: 3px solid skyblue; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.left { 
 
    background-color: salmon; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.right { 
 
    background-color: blanchedalmond; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="outer"> 
 
    <div class="left"> 
 
     MAIN TEXT 
 
    </div> 
 
    <div class="right"> 
 
     additional info sdjkfhsdf 
 
    </div> 
 
</div>

Answer 1

我改變你的CSS一點點。這裏是一個fiddle

對於.left我添加了浮動和最大寬度（因爲你將它推到容器的60％），我刪除了overflow：hidden因爲你總是想要它。

.left { 
background-color: salmon; 
white-space: nowrap; 
max-width: 60%; 
float: left; 
} 

我刪除了顯示：flex from .outter。我認爲這是你想要的。

Answer 2

.outer { 
 
    width: 200px; 
 
    background-color: skyblue; 
 
    border: 3px solid skyblue; 
 
    overflow:hidden; 
 
} 
 
.left { 
 
    float:left; 
 
    background-color: salmon; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 
.right { 
 
    background-color: blanchedalmond; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

What I have: 
 
<div class="outer"> 
 
    <div class="left"> 
 
     MSGDFGDFGDFDFGDFGDFGDFG 
 
    </div> 
 
    <div class="right"> 
 
     adfhdfgh 
 
    </div> 
 
</div>

http://jsfiddle.net/gksfwozz/2/

從這個鏈接How to get these two divs side-by-side?