テキストを折り返す画像がよくありますが、次のようにテキストがぎこちなく折り返されることがあります。
HTML では、画像は左にフロートされ、テキストは単純に続きます。
<p><img style="float:left;" src="/images/[image]" /></p>
<p>This is my David Copperfield, <em>I was born</em> kind of bio. For a more concise one, please see the <a href="/jenny/press-kit#bio">press kit</a>.</p>
...
これは、テキストの長さがたまたま画像の下部を超えて左余白に戻った場合、およびテキストの量が 1 行以上を埋めるのに十分な長さでない場合 (この場合は、一言だけ）。そうなると、見た目がかなり悪くなります。
それで、これが起こらないようにテキストフローを制御する方法はありますか?
できることは、テキストがあるタグに追加overflow: hiddenすることです。pこれにより、画像の後に折り返されるテキストは、より大きな部分と一致するようになります。大きな段落がある場合、これはおかしく見えるかもしれませんが、段落がすべてかなり短い場合は、これが役立つはずです。
例: http://jsfiddle.net/8ZsKy/2/
または、クラス規則を追加して、それを潜在的な「問題」の段落に適用することもできます。
p.wrap-inline {
overflow:hidden;
}
EDIT：更新されたjsfiddle（おっと）
この質問は、実際には時々迷惑ですが、実際に考えさせられました。過去に、行の高さを少し調整することで、これと同様の問題を修正しました。
line-height:20px;
または、画像の実際のサイズを少し大きくまたは小さく調整します。
<img style="float:left;" src="/images/[image]" width="100" height="200" />
またはテキストの追跡を変更する
letter-spacing: 0.1em;
またはハイフネーションを使用します（私はそれが好きではないか、お勧めしません）
hyphens: auto;
ただし、私の知る限り、テキストの孤立を排除するための CSS ルールについては知りません。スクリプトがあるかもしれませんが、私はそれについて聞いたことがなく、しばらく前に少し調査しました。それが役に立ったことを願っています:)
これがフローティングの仕組みです。それを望まない場合は、使用しないでくださいfloat; たとえば、代わりに配置を使用して、テキストが画像の右側にブロックとして表示されるようにすることができます。
残念ながら、フローティングを使用して最後の行を短くしないように要求する方法はありません。直前の単語との間に改行なしのスペースを使用することで、最後の単語が 1 行に表示されるのを防ぐことができます (例: it will. そして、これを短い単語のグループに拡張できます。しかし、これは、グループが独自の行に表示され、それに応じて前の行が短くなることを意味します (したがって、奇妙に見える場合があります)。
テキストが少し長すぎる場合は、レンダリングを変更して垂直方向のスペースを減らすことができます。たとえば、段落間の空行を削除することで、これは大きなレイアウトの変更になります (ただし、おそらく良いものです)。
p { margin: 0 }
p + p { text-indent: 1.3em; }
<img style="float:left; clear="both" src="/images/[image]" />