Hanging line of text

I reformulated the question using a concrete example. There is practically no way to rediscover it, so I created a new question.

The site that I am administering has a hanging line of text. I made a JSFiddle to represent what is happening. I will also include the site if people want to go to it.

You can see what I'm talking about on the line: “Here Barr signs autographs during a training camp for his rookie.” in JSFiddle. I want to year.be under Here, not under the div.

Js feed

Site here

This happens only in certain situations - for example, above, where the tag <p>works, and part of it is under this ad.

My client would prefer, if there was a way, that the second half of the line would not just appear on its own. Is there a way to make sure that a tag <p>that is offset over something moving to the left of it remains shifted, even if the second half of the tag <p>can technically have a full width?

I tried a bunch of different things, and so far nothing has worked. Any help would be appreciated.

#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>
Run codeHide result

I want a solution in which year.and Hereat the bottom of the ad start in one place. I do not want other tags to <p>be affected by this, and this should work in a dynamic system where I do not know how many tags <p>will exist.

Here is the image:

enter image description here

+4
source share
1 answer

, , CSS:

p {
    overflow: hidden;
}

div.

.


​​ :

, , , div (, ) , , , . , , , (, , , ).

. , , .

, , p- , . :

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

, : , , overflow: hidden. , , , " " - .

+4

Source: https://habr.com/ru/post/1686604/


All Articles