HTMLテキストの孤立を防ぐにはどうすればよいですか？

Question

私はよく、私は周りにテキストを折り返すイメージを持って、時には文章のようなので、ぎこちなくラップ：

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つの単語だけです）。それが起こると、それは本当に悪いです。

だから、これが起こらないようにテキストフローを制御する方法はありますか？

Answer 1

テキストがあるpタグにoverflow: hiddenを追加することです。これにより、イメージの後ろに折り返すテキストが、大きな部分と一直線になるようになります。大きな段落があるときにこれは面白く見えるかもしれませんが、段落がかなり短い場合は、これが役立ちます。

例：http://jsfiddle.net/8ZsKy/2/

交互あなただけのクラスのルールを追加し、潜在的な「問題」の段落に適用できます。

p.wrap-inline { 
    overflow:hidden; 
} 

EDIT：更新jsfiddle（おっと）

Answer 2

<img style="float:left; clear="both" src="/images/[image]" /> 

Answer 3

それは時々実際に迷惑ですが、この質問は、実際に私は過去に、私は、行の高さを少し調整することにより、これに

line-height:20px; 

や実際のサイズを調整し、同様の問題を修正し、考えていました画像少し大きいか小さい、

<img style="float:left;" src="/images/[image]" width="100" height="200" /> 

またはテキストの追跡を変えるの

letter-spacing: 0.1em; 

やハイフネーションを使用する（私はそれを好むか、それをお勧めしません）

hyphens: auto; 

しかし限り私の知識は、私はテキスト孤児を排除するために、任意のCSSルールを知らない行くように。スクリプトはあるかもしれませんが、私はこれまで聞いたことがなく、しばらく前から研究しています。期待して助けてください:)

Answer 4

これはフローティングの仕組みです。あなたがそれを望まないなら、floatを使わないでください。あなたはできます。その代わりにテキストを画像の右側にブロックとして表示するように配置を使用します。

残念ながら、フローティングとリクエストを使用する方法はありません。最後の行は短くしないでください。最後の単語がそれ自身の行に表示されないようにするには、その単語と前の単語との間に空白を入れないでください。 it will。そして、これを短い言葉のグループに拡張することができます。しかしこれは、グループがそれ自身の行に現れ、前の行が対応して短くなる（したがって、奇妙に見えるかもしれない）ことを意味するだけです。

テキストの長さが少し長すぎる場合は、レンダリングを変更して垂直方向にスペースを取らないようにすることができます。これは主要なレイアウト変更（おそらく良いものが）になりますけれども、段落間の空行を削除することによって：あなたは何ができるか

p { margin: 0 } 
p + p { text-indent: 1.3em; }