Wie kann ich ein div mehr als ein anderes priorisieren

Question

Ich möchte zwei Textfelder nebeneinander. Der erste sollte dem zweitwichtigeren Platz geben.

Wie ist das möglich, ohne feste Breiten und Text-Overflow geben: Ellipse auf der ersten?

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

Sie können Flexbox verwenden und overflow: hidden und text-overflow: ellipsis auf erstes Kind div.

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

Wenn die Browser können Sie unterstützen müssen flexbox unterstützen, mit Flexbox gehen.

Ich habe ein Beispiel HTML für Sie gemacht, um Ihnen zu zeigen, was es tut. Die Magie CSS-Eigenschaften sind hier: display: flex, flex-direction: row, flex: 1 und 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>