`span.avoidwrap` クラスを使用して HTML で改行を強制する方法-CSSチュートリアル-php.cn

`span.avoidwrap` クラスを使用して HTML で改行を強制する方法

Mary-Kate Olsen

リリース： 2024-10-26 19:18:02

オリジナル

413 人が閲覧しました

How to Force Line Breaks in HTML Using the `span.avoidwrap` Class?

HTML での指定された改行ポイントの作成

HTML では、通常、改行はテキストの自然な空白文字 (スペース、カンマ)。ただし、特定のシナリオでは、改行の優先位置を指定することが望ましい場合があります。

span.avoidwrap による指定された改行

指定された行を実装するにはブレークポイントには、span.avoidwrap クラスを使用します。このクラスは、span 要素をインラインブロックとして定義し、個別の単語ではなく単一の単位としてレンダリングされます。目的のテキストをで囲むことで、

例:

次の HTML コードを考えてみましょう:

<code class="html"><table border="1" cellspacing="0" cellpadding="0">
<tr>
    <td>
        <div style="width: 180px;">
            <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    lorem ipsum
                </td>
                <td>
                    <span class="avoidwrap">
                        Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks
                    </span>
                </td>
                <td>
                    lorem ipsum
                </td>
            </tr>
            </table>
        </div>
    </td>
</tr>
</table></code>

ログイン後にコピー

この例では、テキスト「ハニーナッツチェリオス、ウィートチェックス、グレープナッツ、ライスクリスピー、非常に長い名前のランダムなシリアル、オート麦のハニーバンチ、ウィーティー、スペシャル K、フルートループ、アップルジャック」は次のようになります。 spain.avoidwrap 要素内でラップされます。これは、スパンの先頭で改行する必要があることをブラウザに示し、その結果、"Rice Krispies":

<code class="html">Honey Nut Cheerios, Wheat Chex, Grape-Nuts,
Rice Krispies, Some random cereal with a very
long name, Honey Bunches of Oats, Wheaties,
Special K, Froot Loops, Apple Jacks</code>

ログイン後にコピー

注: の後に改行されます。 -wrap:avoid CSS プロパティは同様の機能を提供しますが、すべてのブラウザでサポートされているわけではありません。

以上が`span.avoidwrap` クラスを使用して HTML で改行を強制する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。