我有两个div并排。
无论每个div内容的长度如何，两个div都必须保持在同一行（而不是一个在另一个行下）。
所以我text-overflow: ellipsis在两个div上都使用了css （从另一个jsfiddle拼凑而成）。除了一个小问题，它确实有效。
如何将a添加min-width到第二个div类：（.container > div:last-child这是黄色背景的div）？
我试图添加一个min-width: 150px;到此CSS类，但这会杀死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>我将不胜感激任何建议。
代替使用该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属性的更多信息。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句