防止フロートと

Question

を必要なときに、私は私が1行に希望の三つのフィールド持つテキスト・オーバーフローを強制：

<div><span class="name">Blue Widgets Over Miami</span><span class="size"> large </span><span class="price">$9.99</span></div> 

を私は.nameのが好きで、その行の左側にあることを.sizeたいです右に.price、各フィールドの間には常にスペースが必要です。

ここでも難しい部分です。画面が本当に狭い場合は、divをラップまたはオーバーフローさせたくありません。代わりに、.nameを省略記号としてテキストオーバーフローさせたいと思います。画面が狭い場合

div{background:#abcdef;white-space:nowrap} 
.name{text-overflow:ellipsis} 
.size{} 
.price{float:right} 

は今、その後.priceは（私はしたくない）二行目に低下し、画面がdivの.nameのと.sizeオーバーフローその後、でも狭い場合（これはIまた望ましくない）、.nameは省略記号で切り捨てられません。

私は間違っていますか？

Answer 1

使用フレキシボックス：

div { 
 
    background: #abcdef; 
 
    display: flex; 
 
} 
 
.name { 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
} 
 
.size { 
 
    margin: 0 .5em; 
 
} 
 
.price { 
 
    margin-left: auto; 
 
}

<div> 
 
    <span class="name">Blue Widgets Over Miami</span> 
 
    <span class="size">large</span> 
 
    <span class="price">$9.99</span> 
 
</div> 
 
<br /> 
 
<div> 
 
    <span class="name">Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami Blue Widgets Over Miami</span> 
 
    <span class="size">large</span> 
 
    <span class="price">$9.99</span> 
 
</div>

Answer 2

私は左のテキストがない以上となるように、親のdivにpadding-rightを添加し、山車を取り除き、右の絶対位置にそれを変更し、これはあなたがhttps://jsfiddle.net/kvb5hb6f/14/

のために行くしているものだと思います右の価格をラップしてから、text-overflow: ellipsis;を親部門に追加してください。

div { 
    background: #abcdef; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    padding-right: 50px; 
} 

.price { 
    position: absolute; 
    right: 0; 
}