Hängende Textzeile

Question

Die Frage wurde mit einem konkreten Beispiel umformuliert. Es gibt praktisch keine Möglichkeit, es wieder zu öffnen, also habe ich eine neue Frage erstellt.

Auf einer Website, die ich verwalte, gibt es eine hängenden Textzeile. Ich habe eine JSFiddle gemacht, um darzustellen, was passiert. Ich werde auch die Seite einbeziehen, wenn Leute dorthin gehen wollen.

Sie können sehen, worüber ich in der Zeile sprechen "Hier ist Barr beim Autogrammieren während des Trainingslagers sein Rookiejahr." im JSFiddle. Ich möchte year. unter Here sein, nicht unter dem div.

JS Fiddle

Site Here

Dies tritt nur in bestimmten Situationen - wie die oben in dem ein <p> Tag läuft auf und ein Teil davon ist unter der Anzeige in Frage.

Mein Kunde würde es vorziehen, wenn es einen Weg gäbe, so dass die zweite Hälfte der Zeile nicht von alleine auftauchte. Gibt es eine Möglichkeit zu machen ist, dass ein <p> Tag, der von etwas verschoben wurde, das links von ihm verschoben wurde, verschoben wird, selbst wenn die zweite Hälfte des Tags <p> technisch die volle Breite haben könnte?

Ich habe ein paar verschiedene Dinge ausprobiert und nichts hat bisher funktioniert. Jede Hilfe wäre willkommen.

#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>

Ich möchte eine Lösung, bei der year. und Here am unteren Rand der Anzeige Start an der gleichen Stelle. Ich möchte keine anderen <p> Tags davon betroffen sein, und dies muss in einem dynamischen System funktionieren, in dem ich nicht weiß, wie viele <p> Tags existieren.

Hier ist ein Bild:

Answer 1

nicht intuitiv, aber Sie bekommen das gewünschte Ergebnis durch die folgende CSS hinzufügen:

p { 
    overflow: hidden; 
} 

Dies wird Absätze verhindern unter schwebten div wickeln.

Sehen Sie diese fork of your fiddle für eine Demonstration.

---

mehr Informationen als Antwort auf Ihren Kommentar hinzugefügt:

Wenn Sie auch mit der rechten schwebte divs haben, die genau auf der rechten Seite Ihrer Anzeige sitzen, können Sie in ein Problem laufen, wo nur gibt es eine sehr schmaler horizontaler Abstand zwischen der Anzeige und dem rechts schwebenden div (z. B. ein Bild). Ein Absatz, der dort beginnen würde, wäre sehr eng. Da der Absatz so eingestellt ist, dass Überlauf ausgeblendet wird, kann der Absatz, wenn er schmal genug ist, sogar so schmal sein, dass nicht einmal ein einzelnes Zeichen angezeigt werden kann (und so scheint es, als ob der Absatz verschwindet).

Eine Lösung dafür ist, Ihren Absätzen eine Mindestbreite hinzuzufügen.Dies führt dazu, dass der Absatz ein wenig nach unten springt, bis mindestens so viel horizontaler Platz für den Text verfügbar ist - er wird unter dem Bild in der rechten Spalte angezeigt.

Es ist wahrscheinlich auch eine gute Idee, dies auf nur die relevanten Absätze und nicht alle p-Tags auf der Seite zu beschränken, also sollten Sie in Ihren Selektoren etwas restriktiver sein. Zum Beispiel:

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

Wie, warum der Text springt ein wenig herum: Ich fand, dass das Verhalten der leere Absätze ändert sich, wenn Sie overflow: hidden ihnen hinzufügen. Die Absätze unter dem, der verschwindet, springen viel, weil der Wortumbruch auf diesem "zu schmalen" Absatz bewirkt, dass jedes Wort auf einer neuen Zeile beginnt - und daher seine Höhe enorm erhöht.