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%; 
}