Question

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

Div one是动态宽度，用户输入的文字。

Div 2是日期，位于右侧。

如果宽度不够（手机），我希望用户输入的文字不适合屏幕宽度溢出。

我尝试了以下操作，但是max-width在这里不起作用，因为它只会溢出文字直到某一点：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何为任意文本实现此目的？

JSFiddle as well

Answer 1

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

请看下面的代码段：

＆＃13;

.parent {
  display: flex;
  width: 100%;
}

.dynamic {
  flex: 1;
}

.cutting-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

＆＃13;

<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>

＆＃13;

希望这有帮助！

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

2 个答案: