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

Question

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

Div 一种是动态宽度，用户输入的文本。

Div二是日期，放在右边

当宽度不够时（移动phone）我希望用户输入的文本不适合屏幕宽度溢出。

我尝试了以下方法，但 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%;
}

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

CSS: two divs in one line, dynamic(left) and fixed(right) width. make overflow text on dynamic div

html

css

tablecell