兩個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。