Question

我有两个div并排。

两个div必须保持在同一行（不是另一行），尽管每个div的内容长度。

所以我在两个div上使用了css text-overflow: ellipsis（从不同的jsfiddle拼凑而成）。除了一个小问题外，这确实有效。

如何将min-width添加到第二个div类：.container > div:last-child（这是具有黄色背景的div）？

我尝试在此css类中添加min-width: 150px;，但这会导致text-overflow: ellipsis;效果。

我附上了jsfiddle作为我想要实现的目标的一个例子。

＆＃13;

.container {
  display: -webkit-flex;
}
.container>div:first-child {
  white-space: nowrap;
  -webkit-order: 1;
  -webkit-flex: 1;
  background: aqua;
  -webkit-flex: 0 1 auto;
  /*important*/
  text-overflow: ellipsis;
  overflow: hidden;
  width: auto;
}
.container > div:last-child {
  white-space: nowrap;
  -webkit-flex: 1;
  -webkit-order: 2;
  background: yellow;
  -webkit-flex: 1 0 auto;
  /*important*/
  text-overflow: ellipsis;
  overflow: hidden;
  width: 150px;
}
.container > div:first-child:hover {
  white-space: normal;
}
.container > div:last-child:hover {
  white-space: normal;
}

＆＃13;

<div class="container">
  <div class="not_important1">
    employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer employer
  </div>
  <div class="not_important2">
    url url url url url url url url url url url url url url url url url url url url url url url url url
  </div>
</div>

＆＃13;

我将不胜感激。

Answer 1

不使用width属性，而是使用flex属性。

这就是你现在所拥有的：

.container > div:last-child {
    -webkit-flex: 1 0 auto; /*important*/
     width: 150px;
}

而是试试这个：

.container > div:last-child {
    /* -webkit-flex: 1 0 auto; <-- REMOVE */
     flex: 1 0 150px;
}

这告诉div的初始宽度为150px，但是可以使用flex-grow: 1进行扩展。

实际上，min-width: 150px和flex: 1 0 150px是相同的。

详细了解MDN上的flex property。

两个div并排使用省略号 - 最小宽度问题

1 个答案: