他の兄弟divのコンテンツの幅が広い場合、CSSの親の残りの幅を取るdivを作成するには？

Question

次のレイアウトを作成するにはどうすればいいですか：

2つのdivは共通の親の幅を共有します。右側のdiv要素が同じ幅で、それがテキストコンテンツ

だとして左側のdiv要素は親や用途のすべての残りの幅を占めている

• - ながら、それらの両方は、単一行のテキストコンテンツを表示しますtext-overflow：テキストが切り取られるところの省略記号。 '...'が表示されます。ここで

私はそれが実装されるべきかについて知っていると思うものです -

.parent { 
 
    width: 400px; 
 
    height: 200px; 
 
} 
 

 
.left { 
 
    display: block; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: none; 
 
} 
 

 
.right { 
 
    display: inline-block; 
 
}

<div class='parant'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>

それはthis example

Answer 1

あなたはちょうど要素に親のdisplay: flexとflex-shrink: 0を設定し、このためにフレキシボックスを使用することができます。

.parent { 
 
    width: 400px; 
 
    height: 200px; 
 
    display: flex; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: red; 
 
} 
 
.right { 
 
    background: lightblue; 
 
    flex-shrink: 0; 
 
}

<div class='parent'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>

Answer 2

のようになります。この

.parent { 
 
    width: 300px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    display: flex; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    
 
} 
 
.right { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    
 
}

<div class='parent'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>

を試してみてください0

**

Answer 3

あなたはあなたの条件のためflexboxを使用することができます。それは本当にシンプルで、他のどんなdisplayのプロパティと同様に動作します。これはcodepen linkです。これは100％動作します。

CSS

.container { 
    display: flex; 
    max-width: 500px; 
    border: 1px solid #ddd; 
    padding: 5px; 
} 
.one, 
.two { 
    flex-grow: 1; 
    word-break: break-all; 
    padding: 10px; 
    color: #fff; 
} 
.one { 
    background-color: red; 
} 
.two { 
    background-color: blue; 
} 

Answer 4

私はそれがこのためにFlexboxを使用して、より良いと思います。 display: flex;を.parentに、flex:1;を.leftに設定してください。それはあなたのトリックを行い、それ以上の流れはありません親の幅もあります。

.parent { 
 
    width: 100%; 
 
    height: 200px; 
 
    display: flex; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    background: pink; 
 
    flex:1; 
 
} 
 
.right { 
 
    background: green; 
 
}

<div class='parent'> 
 
    <div class='left'> This div should display all text content possible without line-breaking and display '...' where its being cut </div> 
 
    <div class='right'> This div is as wide as its text content </div> 
 
</div>