テキストの行末に

Question

具体的な例で質問を再構成しました。私は新しい質問を作りました。

私が管理しているサイトでは、文字列があります。私は何が起こっているのかを表すJSFiddleを作った。人々がそれに行くことを望むならば、私はサイトも含めます。

あなたは私がラインで何を話しているのかを見ることができます。「バーニーは新人訓練キャンプの間にサインをしています。 JSFiddleでyear.はHereになりますが、divの下には表示されません。

JS Fiddle

Site Here

これは、特定の状況でのみ発生 - <p>タグが上で実行され、その一部は、問題の広告の下にある場合、上記のような。

私のクライアントは、行の後半がそれ自身で表示されないような方法があれば、より好むでしょう。方法はありますか？<p>タグの後半部分が技術的に全幅を持つことができたとしても、<p>タグが左にフローティングされてシフトされているようにする方法はありますか？

私はさまざまなことを試してきましたが、今までのところ何も働いていませんでした。どんな助けもありがとう。

#block-inject-1 { 
 
    width: 200px; 
 
    float: left; 
 
    height: 200px; 
 
    background-color: red 
 
}

<div class="field-item even" property="content:encoded"> 
 

 
    <p>Here is iFolloSports.com original video of <a href="http://ifollosports.com/nfl/vikings-star-anthony-barr-promoting-his-charity-steps-ucla-videos">Vikings Pro Bowl linebacker Anthony Barr&nbsp;</a>signing autographs. This event was organized by&nbsp; 
 
    <a href="http://www.cravetheauto.com/" target="_blank">Crave Sports Company</a> and held Tuesday night at Bald Man Brewing, in the Twin Cities suburb of Eagan, Minnesota.</p> 
 

 
    <p>Barr is now in his fourth NFL season, amid appearing in the Pro Bowl each of the last two years. Thus far in 2017, the Vikings are 2-1, with Barr contributing 20 combined tackles (14 solo), in this early season. For his career, Barr has amassed 228 
 
    combined tackles (160 solo) and 9.5 sacks.</p> 
 

 
    <p></p> 
 

 
    <p>In addition to Tuesday’s gathering, iFolloSports.com has provided multiple behind the scenes looks at Barr, in both Minnesota and his hometown of Los Angeles.</p> 
 

 
    <p></p> 
 

 
    <div id="block-inject-1" class="block-inject block-inject-1">AD HERE</div> 
 
    <p>Here is Barr, at a restaurant near his alma matter of UCLA, <a href="http://ifollosports.com/nfl/vikings-star-anthony-barr-promoting-his-charity-steps-ucla-videos">interacting with patrons and signing autographs</a>. The appearance was on behalf of 
 
    his&nbsp; 
 
    <a href="http://www.anthonybarr55.com/" target="_blank">Raise the Barr Foundation</a>, which focuses on assisting single mothers in their efforts to pursue higher educational opportunities.&nbsp;</p> 
 

 
    <p>Just a few weeks later, Barr and his mother Lori, hosted a food and wine-pairing event, at The Ritz-Carlton Residences in downtown LA, with <a href="http://ifollosports.com/nfl/vikings-anthony-barr-hosts-charity-gala-and-speaks-ifollosportscom-video">iFolloSports.com providing full coverage of the gala, including a wide-ranging interview</a> with the 25-year-old LB.</p> 
 

 
    <p><a href="http://ifollosports.com/nfl/cassel-bridgewater-greenway-ap-barr-vikings-camp-videos">Here is Barr signing autographs during training camp his rookie year</a>.</p> 
 

 
    <p><a href="http://ifollosports.com/nfl/solid-rookie-anthony-barr-signing-video">This clip displays the UCLA alum appearing at an autograph event, also during his rookie campaign</a>.</p> 
 

 
    <p>&nbsp;</p> 
 

 
</div>

私は同じ場所で広告の開始の底部近くyear.とHereソリューションを求めています。私は他の<p>タグがこれによって影響を受けないようにしたい、そして、これはどのくらい多くの<p>タグが存在するかわからない動的システムで動作しなければならない。

はここに画像です：

Answer 1

直感的ではありませんが、あなたは以下のCSSを追加することによって、望ましい結果を得る：

p { 
    overflow: hidden; 
} 

これはフローティングのdivの下で包むから段落を防ぐことができます。

デモ用のfork of your fiddleを参照してください。唯一の非常にありどこにも広告の右側に正確に座る右浮かべdivを持っている場合

は、あなたが問題に遭遇することがあります。

---

はあなたのコメントに反応してより多くの情報を追加しました広告と右浮動div（例えば、画像）の間の狭い水平スペース。そこから始まる段落は非常に狭いでしょう。パラグラフはオーバーフローを隠すように設定されているので、パラグラフが狭すぎると、たとえ1文字でも表示できないほど狭い場合もあります（パラグラフが消えるように見えます）。

解決策は、段落に最小幅を追加することです。これは、少なくともテキストのために利用可能な水平スペースが少なくなるまで、段落を少し下に移動させるため、右の列の画像の下に表示されます。

これは、関連する段落のみに制限し、ページ上のすべてのpタグに制限することをお勧めします。そのため、セレクタで少し制限をかけたいと思うかもしれません。例えば：私はあなたがそれらにoverflow: hiddenを追加するとき、空の段落の振る舞いが変化することを発見した：テキストは少し周りジャンプ理由として

.field-item p { 
    overflow: hidden; 
    min-width: 200px; 
} 

。その「あまりにも狭い」パラグラフでの単語の折り返しが各単語を新しい行で始めるようになるため、消えていく段落の下の段落は大きく飛び越します。