CODEWITHSUNDEEP
htmlcss
Steven Matthews
Steven Matthews

Reputation: 11295

Hanging line of text

Reformulated the question with a concrete example. There's virtually no way of it being re-opened so I created a new question.

On a site I'm administering, there's a hanging line of text. I have 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 am talking about on the line "Here is Barr signing autographs during training camp his rookie year." in the JSFiddle. I want year. to be under Here, not under the div.

JS Fiddle

Site Here

This only occurs in certain situations - like the one above where a <p> tag runs on and part of it is under the ad in question.

My client would prefer if there was a way so that the second half of the line didn't just appear by itself. Is there a way to make is so that a <p> tag that's been shifted over by something floated to the left of it stays shifted over, even if the second half of the <p> tag could technically have full width?

I've tried a bunch of different things and nothing has worked so far. 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>

I want a solution where the year. and Here near the bottom of the ad start at the same location. I want no other <p> tags to be affected by this and this must work in a dynamic system where I don't know how many <p> tags will exist.

Here's an image:

enter image description here

Upvotes: 4

Views: 158

Answers (1)

brain99
brain99

Reputation: 893

Not intuitive, but you get the desired result by adding the following CSS:

p {
    overflow: hidden;
}

This will prevent paragraphs from wrapping under floated div.

See this fork of your fiddle for a demonstration.

Added more information in response to your comment:

If you also have right-floated divs which sit exactly to the right of your ad, you may run into an issue where there is only a very narrow horizontal space between the ad and the right-floated div (eg an image). A paragraph that would begin there would be very narrow. Since the paragraph is set to hide overflow, if the paragraph is narrow enough it may even be so narrow that not even a single character can be displayed (and thus it seems as it the paragraph disappears).

A solution for this is to add some minimum width to your paragraphs. This causes the paragraph to jump down a bit until there is at least that much horizontal space available for the text - so it will appear under the image in the right column.

It's probably also a good idea to limit this to only the relevant paragraphs and not all p tags on the page, so you might want to be a bit more restrictive in your selectors. For example:

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

As to why the text jumps around a bit: I have found that the behavior of empty paragraphs changes when you add overflow: hidden to them. The paragraphs under the one that disappears jump a lot because word wrap on that "too narrow" paragraph causes each word to start on a new line - therefore hugely increasing its height.

Upvotes: 4

Related Questions