CSS は画像の周りでテキストを折り返す効果を実現します

この記事では、主に CSS テキスト ラッピング画像で発生する問題と解決策を詳しく紹介します。興味のある友人は参照してください

テキスト ラッピング画像効果を実現する CSS

、Word でテキスト ラッピング画像 を正しく実行します。をクリックしてプロパティを調整します。ただし、HTML ドキュメントには直接的な属性はありません。したがって、CSS を使用してこの効果を実現できます。

まず、画像を左揃えにする必要がある場合は左に設定し、右揃えにする必要がある場合は右に設定します。さらに、必要に応じて画像とテキスト間のスペースを設定することもでき、CSS パディングも適用されます。

例:

この画像識別ステートメントをページ上のテキストの中央に挿入すればOKです。

(1) テキストラッピング画像の例

レンダリング:

(2) CSS テキストラッピング画像の問題と解決策:

1. はじめに

必要です画像をテキストで囲む効果を実現するのは、とても簡単だと思いました。

1) コード部分

これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落ですこれは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です これは中国語の段落です

< /p>

2) エフェクト画像

目的の効果を得るのは簡単です。最も重要なコード: 画像を左側に移動するだけです。これは非常に簡単ではないでしょうか。

2. 発生した問題

中央のテキストを連続した英語の文字に置き換えると、図に示すような問題が発生しました

そこで、関連する情報を検索し、結果をテストした結果、次のことがわかりました:

ブラウザのデフォルトの解像度 英語や数字に関しては、単語ごとに解析されます。

つまり、各単語は全体であり、スペースが足りない場合、単語は分割されません。

そのため、上記の状況が発生します。

最後の比較表

3. 解決策

考察: テキストを強制的に折り返すことができる関連する属性は CSS にありますか?

答えはもちろん: word-break: Break-all;

これで問題は解決します。

4. 追記：word-wrap、word-break

情報を検索すると、別の属性が見つかりました: word-wrap: Break-word; 重複した属性もあります。

実際、これは当てはまりません。再度情報を検索したところ、この 2 つにはまだ違いがあることがわかりました。

1) word-wrap: Break-word;

-- 長い単語をラップできるようにします。次の行。

単語の長さが p の幅を超える場合、以下に示すように、デフォルトでは折り返されません

word-wrap: Break-word; を設定すると、単語は新しい行に表示されます

2) word-break : Break-all;

-- 単語を区切るかどうか。

--私の個人的な理解は次のとおりです。単語の各文字を独立した単位に分割します。

このようにして、あらゆる場所を埋めることができるため、画像を囲むテキストの効果が得られます。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 を使用してマテリアル デザイン効果を実現する

RGBa を使用して CSS3 で透明度を調整する方法

以上がCSS は画像の周りでテキストを折り返す効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。