html - 悬挂文字行

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;
}

这将防止段落在 float div 下换行。

查看此 fork of your fiddle进行演示。

---

添加了更多信息以回应您的评论:

如果您还有恰好位于广告右侧的右浮动 div，您可能会遇到广告和右浮动 div(例如图片)之间只有非常狭窄的水平空间的问题.从那里开始的段落将非常狭窄。由于段落设置为 overflow hidden ，如果段落足够窄，甚至可能会窄到一个字符都显示不出来(因此看起来段落消失了)。

一个解决方案是为您的段落添加一些最小宽度。这会导致段落向下跳一点，直到至少有那么多的水平空间可用于文本 - 因此它会出现在右栏中的图像下方。

将此限制为仅相关段落而不是页面上的所有 p 标记可能也是一个好主意，因此您可能希望对选择器进行更多限制。例如:

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

至于为什么文本会跳来跳去:我发现当您向空段落添加 overflow: hidden 时，空段落的行为会发生变化。消失的段落下的段落跳跃很多，因为那个“太窄”段落的自动换行导致每个单词都在一个新行开始 - 因此极大地增加了它的高度。