html - 我怎样才能优先考虑一个div而不是另一个

Question

我想要两个彼此相邻的文本框。第一个应该给第二个更重要的空间。

如果不提供固定宽度并在第一个上使用 text-overflow: ellipsis，那怎么可能呢？

示例:https://jsfiddle.net/by2e9uej/

div {
  border: 1px solid black;
}
#test1 {
  width: 250px;
  overflow: hidden;
  white-space: nowrap;
}
#test1 > div {
  display: inline-block;
}
#test2 {
  -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    vertical-align: bottom;
}

<div id="test1">
  <div id="test2">long text standing in here</div>
  <div id="test3">more important text in here</div>
</div>

Answer 1

您可以使用 Flexbox 并在第一个子 div 上设置 overflow: hidden 和 text-overflow: ellipsis。

div {
  border: 1px solid black;
}
#test1 {
  width: 250px;
  display: flex;
}
#test1 > div {
  white-space: nowrap;
}
#test2 {
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="test1">
  <div id="test2">long text standing in here</div>
  <div id="test3">more important text in here</div>
</div>