を必要なときに、私は私が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は省略記号で切り捨てられません。
私は間違っていますか?
ありがとう、これは素晴らしいです!私はマージンを持つ.sizeのファンではなかったので、私はラインを変更して終わりました:
@GFL「 」はあまり意味がありません。マージンが必要ない場合は、 '.size :: before、.size :: after {content: '';ホワイトスペース:プレ; } ' – Oriol
フォントが同じサイズでない場合、フレックスボックスが原因でテキストアラインメントの問題が発生しています。 .nameと.priceより大きい.nameを持つ場合、すべてのテキストが同じベースラインを共有することは可能ですか? – GFL