2

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です。

4

2 に答える 2

6

単純に s2 (またはオプションで s1 と s2 の両方) をインライン ブロックにします。

#s2 {
    display: inline-block;
}

これにより、十分なスペースがある場合、s2 ボックス全体が s1 と同じ行に流れ、2 番目のポイントで説明されているように折り返され、次に 3 番目のポイントで説明されているようにその内容が記述されます (インライン ブロックはコンテナー ブロック要素のように動作するため)。コンテンツのサイズ変更とラップ時)。これは、興味がある場合に備えて、仕様で詳しく説明されています。

更新されたフィドル

于 2013-10-26T14:45:33.783 に答える