CSS を使用して、ブラウザ ウィンドウのサイズが変更されたときに次のように行の折り返しを自動的に制御することは可能ですか。
- s1 と s2 は、両方とも div 内に収まる場合、同じ行にとどまります
- s2 は、折り返さないと両方が収まらなくなると 2 行目にドロップされます
- s2 は、div 内に収まらなくなったときにラップします
HTML:
<body>
<div>
<span id="s1">Lorem ipsum dolor:</span>
<span id="s2">sit amet consectetur adipiscing eli</span>
</div>
</body>
したがって、考えられるビューは次の 3 つです。
1:
Lorem ipsum dolor: sit amet consectetur adipiscing eli
2:
Lorem ipsum dolor:
sit amet consectetur adipiscing eli
3:
Lorem ipsum dolor:
sit amet
consectetur adipiscing eli
s1 の単語は常に同じですが、s2 の単語は異なる場合があるためwhite-space:nowrap
、ページの幅に基づいて変更することはできません。
Chrome や Firefox で動作するようになれば、ブラウザのサポートは大きな問題ではありません。
これは、操作できる単純なJSFiddleです。