image_html/css_WEB-ITnose を囲む CSS テキストで発生した問題と解決策

1. はじめに

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

1) コード部分

   <style> .img-left { border: 3px solid #005588; width:300px;        } .img-left img { float:left; /* 对图片进行浮动就可以实现了 */ width:150px;        }    </style>      <div class="img-left">        <img src="/static/imghwm/default1.png"  data-src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png"  class="lazy" alt="pic"/> 这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文 <div   style="max-width:90%"></div>    </div>

2) 効果図

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

図

に示すように、中央のテキストを連続した英語の文字に置き換える場合、英語または数字に関しては、テスト結果の後に関連する情報を見つけます。 、単語に従って解析されます。

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

だからこそ上記のような状況が起こるのです。

以前の比較表

3. 解決策

考えてみると、テキストを強制的に折り返すことができる関連する属性が CSS にあるでしょうか?

答えはもちろん次のとおりです。

ワードブレイク

: ブレークオール。

ワードラップ、ワードブレイク

word-wrap、または、実際には同じではありません。これは、情報を検索する別の方法です。 1) 単語の折り返し:

- 長い単語の変更を許可します。次の行へ。词 单 単語の長さの幅が DIV を超える場合、デフォルトは変更されません。下図に示すように、Word-WRAP: BREAK-WORD を設定すると、この単語は Break: Break に置き換えられます。 -全て;解理 - 個人的な理解は、単語の各文字を独立した単位に分割し、

で各場所を埋めることができるため、テキストを囲む画像の効果を達成できるということです。

2 つの違いについてわかりやすく紹介した記事があります。「ワードラップとワードブレイクの違いを本当に理解していますか?」 》