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

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作为我试图实现的一个例子。

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

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

我会明白任何建议。

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是一样的东西。

了解更多关于flex property在MDN。