CSS オーバーフローラップの新しいプロパティ値をどこでも使用

1.まず、overflow-wrap属性を理解する

CSS のoverflow-wrapプロパティは、実際には以前のword-wrapプロパティです。MDN では、 word-wrapドキュメント ページからoverflow-wrapプロパティ ドキュメント ページに直接ジャンプするようになりました。

overflow-wrapプロパティは IE ブラウザではサポートされておらず、他の最新ブラウザでは古いword-wrapプロパティ構文がまだサポートされているため、 overflow-wrapプロパティを使用する理由はありません。

ある日overflow-wrapプロパティが突然新しいプロパティ値「 anywhereをサポートするようになり、 overflow-wrapプロパティを使用する理由が生まれました。

overflow-wrapプロパティの正式な構文は次のとおりです。

オーバーフローラップ: 通常 | 単語区切り | 任意の場所

2. どこでも使える

技術属性値の機能を説明する前に、まず「ハード改行anywhereと「ソフト改行」の概念について基本的な理解を深めたいと思います。

ハード改行は、テキストの区切りに実際の改行を挿入しますが、ソフト改行は実際には同じ行に残りますが、複数の行に分割されているように見えます。たとえば、 word-break:break-allは、長い英語の単語をソフト改行に含めます。

どこでもとbreak-wordの相違点と類似点

通常の状態では、 anywhere break-wordと同じように動作します。つまり、行内に他の許容可能なブレークポイントがなく、ブレークポイントにハイフンが挿入されていない場合、通常はブレークできない文字列 (長い単語や URL など) は、どの位置でもブレークできます。

平たく言えば、連続する英字を分割せずに分離できる場合は分割し、分割できない場合は分割します。そのため、break-all と比較すると、空白が残る場合があります。次の図に示すように:

詳細については、「word-break:break-all と word-wrap:break-word の違い」の記事を参照してください。

さまざまなサポートについて説明しましょう。anywhere anywhere break-wordの違いは、 overflow-wrap:anywhere最小コンテンツ サイズを計算するときにソフト ライン ブレークを考慮するのに対し、 overflow-wrap:break-word考慮しないことです。

たとえば、次の例をご覧ください。

<p class="anywhere">私はzhangxinxuです。</p>
<p class="break-word">私はzhangxinxuです。</p>
ｐ {
    表示: インラインブロック;
    幅: 最小コンテンツ;
    パディング: 10px;
    境界線: 濃いスカイブルーの実線;
    垂直方向の位置合わせ: 上;
}
。どこでも {
    オーバーフローラップ: どこでも;  
}
.break-word {
    オーバーフローラップ: 単語区切り;
}

Chrome ブラウザでの結果は次のようになります。

overflow-wrap:anywhereで宣言された要素の最小幅は各英語の単語が分割された後の幅であるのに対し、 overflow-wrap:break-wordで宣言された要素は依然としてデフォルトの最小幅ルールに従って計算されていることがわかります。

ご覧のとおり、 overflow-wrap:anywhere overflow-wrap:break-wordとword-break:break-all宣言のハイブリッドのようなもので、主に柔軟なレイアウトで使用されます。つまり、要素のサイズが十分な場合は、単語が途切れることなく可能な限り表示され、サイズが十分でない場合は、単語が分割されます。

3. 互換性と結論

overflow-wrap:anywhere現時点では互換性が楽観的ではないことを宣言しています。現在 (2020 年 3 月)、Safari ブラウザはこれをサポートしておらず、Chrome ブラウザはこれをサポートしたばかりです。具体的な情報については、次の表を参照してください。

そのため、現時点では実際のプロジェクトで使用するには適していませんので、理解するだけで十分です。

さらに、この属性は通常のテキスト組版では使用されません。この属性の値を知っていても、使用しようとは思わないでしょう。

将来的には忘れ去られる CSS 機能になる運命にあります。

私が言いたいことはこれだけです。新しい機能について簡単に紹介したいと思います。

要約する

これで、新しい CSS の overflow-wrap プロパティの value anywhere の使用に関するこの記事は終了です。CSS の overflow-wrap の新しいプロパティ value anywhere に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。