悬挂文本线

Question

用一个具体的例子重新表述了这个问题。几乎没有办法重新打开它，所以我提出了一个新的问题。

在我管理的网站上，有一条悬挂式的文本。我制作了一个JSFiddle来表示正在发生的事情。我也将包括该网站，如果人们想去它。

你可以看到我在网上说的话：“这是巴尔在他的新秀年训练营期间签名。”在JSFiddle里。我希望year.在Here之下，而不是在div之下。

JS Fiddle

本站

只有在某些情况下才会发生这种情况--比如上面的情况，其中一个<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> 标记受此影响，这必须在一个动态系统中工作，在这个系统中，我不知道将存在多少<p>标记。

下面是一张图片：

​

​

Answer 1

不直观，但通过添加以下CSS可以获得所需的结果：

p {
    overflow: hidden;
}

这将防止段落包装在浮动div下。

有关演示，请参见此你的小提琴叉。

对您的评论添加了更多信息：

如果你也有权利浮动的div，这正好位于您的广告，您可能会遇到一个问题，只有一个非常狭窄的水平空间之间的广告和右浮动的div(如一个图像)。开头的一段将非常狭窄。由于该段设置为隐藏溢出，如果段落足够窄，甚至可能会太窄，甚至连一个字符都不能显示(因此，该段落似乎消失了)。

解决这一问题的方法是在段落中添加一些最小宽度。这会导致段落向下跳一点，直到文本至少有那么多的水平空间--因此它将出现在右边列的图像下面。

这也许也是一个好主意，只限于相关段落，而不是页面上的所有p标记，因此您可能希望在选择器中更严格一些。例如：

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

关于为什么文本会跳来跳去:我发现当您将overflow: hidden添加到空段落时，它们的行为会发生变化。“消失”段落下面的段落跳了很多，因为“太窄”的段落会导致每个单词在新的行上开始--因此大大增加了它的高度。