内联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?