CSS:一条线中的两个Divs，动态(左)和固定(右)宽度.在Dynamic Div上进行溢出文本

Question

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

div One是动态宽度，用户键入文本。

div二是日期，该日期放在右侧。

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

我尝试了以下操作，但是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

Answer 1

使用 css flexbox 。在Flexbox中实现它非常容易。使您的.parent成为Flex容器，并将Flex属性应用于.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

看更新的小提琴

更改：

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