我怎樣才能優先考慮一個div比另一個

Question

我想要兩個相鄰的文本框。第一個應該給第二個更重要的空間。

怎麼可能不給固定的寬度和使用文本溢出：省略號放在了第一位？

例子：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>

Answer 2

如果您有支持的瀏覽器可以支持flexbox，去Flexbox的。

我做了一些示例html給你，告訴你它做了什麼。 這裏神奇的CSS屬性：display: flex，flex-direction: row，flex: 1，和flex-basis: 200px

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

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