Question

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

如果不给出固定宽度并使用文本溢出，那么如何才能实现：第一个省略号？

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

如果您必须支持的浏览器可以支持flexbox，请使用flexbox。

我已经为你做了一些示例html来向你展示它的作用。这里的魔术css属性包括：display: flex，flex-direction: row，flex: 1和flex-basis: 200px

＆＃13;

.container
{
  display: flex;
  flex-direction: row;
}
.container > .item
{
  flex: 1;
  
    -o-text-overflow: ellipsis;   /* Opera */
    text-overflow:    ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
  
  /* this just added for better view */
  border: 1px solid black;
  padding: 5px;
  box-sizing: border-box;
}
.container > .item-2
{
  flex: 2;
  flex-basis: 200px;
}

＆＃13;

<div class="container">
  <div class="item item-1">
    long text standing in here
  </div>
  <div class="item item-2">
    more important text in here
  </div>
</div>

＆＃13;

我如何优先考虑div而不是另一个div

2 个答案: