CSS：一行中有两个div，动态（左）和固定（右）宽度。在动态div上使溢出文本

Question

我有两个div，它们应显示在同一行上。

第一个是动态宽度，用户键入文本。

Div2是日期，位于右侧。

当没有足够的宽度（手机）时，我希望用户键入的文字不适合屏幕宽度溢出。

我尝试以下，但max-width不工作在这里，因为它仅溢出文本，直到某个时刻：

.parent { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.dynamic { 
 
    display: inline-block; 
 
    max-width: 80%; 
 
} 
 

 
.fixed { 
 
    display: table-cell; 
 
    width: 75px; 
 
} 
 

 
.cutting-text { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
<div class="dynamic cutting-text"> 
 
could be very long text. overflows till max-width reached, so doesn't work for small screens 
 
</div> 
 
<div class="fixed"> 
 
30.11.16 
 
</div> 
 
</div>

如何做到这一点的任意文本？

JSFiddle as well

Answer 1

使用CSS Flexbox的。它很容易在flexbox中实现。将您的.parent设为柔性容器并将柔性属性应用于.dynamic { flex: 1; }。一切都会自动到位。

在下面的代码片段看一看：

.parent { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 

 
.dynamic { 
 
    flex: 1; 
 
} 
 

 
.cutting-text { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="parent"> 
 
<div class="dynamic cutting-text"> 
 
could be very long text. overflows till max-width reached, so doesn't work for small screens 
 
</div> 
 
<div class="fixed"> 
 
30.11.16 
 
</div> 
 
</div>

希望这有助于！

Answer 2

看看在Updated Fiddle

变化：

.fixed { 
    width: 70px; 
    right: 0; 
    position: absolute; 
} 

.cutting-text { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    width: 100%; 
} 

.dynamic { 
    max-width: 80%; 
} 

.parent { 
    display: flex; 
    width: 100%; 
}