コンテンツが CSS 列を越えて分割されないようにするにはどうすればよいですか?

要素内での列の分割を防ぐ方法: 総合ガイド

問題:
Web デザインで、コンテンツが以下を使用してフォーマットされている場合CSS 列を使用すると、コンテンツが列間で折り返され、視覚的に望ましくない効果が生じる可能性があります。たとえば、リストが複数の列に分割され、連続性が損なわれる可能性があります。

Solution:
この望ましくない分割を防ぐには、CSS の Break-inside プロパティを使用できます。これを void-column に設定すると、ブラウザは可能な限り同じ列内にコンテンツを保持するように指示されます。

例:
複数のリスト項目内の改行を防ぐには、列レイアウト:

.list-container {
    column-count: 3;
}

.list-container li {
    break-inside: avoid-column;
}

ブラウザサポート:
残念ながら、2021 年 10 月の時点で、Firefox は Break-inside:avoid-column を完全にはサポートしていません。ただし、このプロパティは、Firefox を除くすべての主要なブラウザでサポートされています。

Firefox の回避策:
Firefox の場合、回避策を使用して、リスト項目内の列の区切りを防ぐことができます。テーブル内のコンテンツ。

<div class="container">
    <table>
        <tbody>
            <tr>
                <th>Number</th>
                <th>Description</th>
            </tr>
            <tr>
                <td>1</td>
                <td>Number one, one, one, one, one</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Number two, two, two, two, two, two, two, two, two, two, two, two</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Number three</td>
            </tr>
        </tbody>
    </table>
</div>

.container {
    column-count: 3;
}

注: この回避策これは、追加のマークアップとスタイルの複雑さを引き起こす可能性があるため、理想的ではありません。

Update:
Firefox 20 の最近のアップデートでは、page-break-inside:avoid のサポートが導入されましたが、これはリスト内の列の区切りを防ぐ問題はまだ完全には解決されていません。 Web ブラウザの開発を継続的に監視することをお勧めします。

以上がコンテンツが CSS 列を越えて分割されないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。