Question

我制作了一个代码来展示问题：http://codepen.io/anon/pen/dMbzop

就像

<div id="demowrapper">
    <div class="rtecenter" style="text-align: center;">&nbsp;</div>
    <p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span></span></p>
    <p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings you positive energy right from the start.</span></span></p>
    <div class="rtecenter">&nbsp;</div>
</div>

和CSS：

#demowrapper {
  max-width: 440px;
  background-color: #666;
}

那么为什么'节奏'包裹到下一行而不是填充上面的那一行呢？

这是我们的客户之一。我无法弄清楚为什么浏览器会像这样。有什么想法吗？

Answer 1

你在字符串中使用 ，它实际上创建了一个长文本字符串，除非你强制它，否则它不会破坏：

rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings

将 更改为普通空格：

#demowrapper {
  max-width: 440px;
  background-color: #666;
}

<div id="demowrapper">
<div class="rtecenter" style="text-align: center;">&nbsp;</div>
<p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span></span></p>
<p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm, </span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book"> brings you positive energy right from the start.</span></span></p>
<div class="rtecenter">&nbsp;</div>
</div>

So why is 'rhythm' on a new line?

或强行打破word-break: break-all;：

之类的东西

#demowrapper {
  max-width: 440px;
  background-color: #666;
}
p {
  word-break: break-all;
}

<div id="demowrapper">
  <div class="rtecenter" style="text-align: center;">&nbsp;</div>
  <p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span>
    </span>
  </p>
  <p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span>
    <span
    style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings you positive energy right from the start.</span>
      </span>
  </p>
  <div class="rtecenter">&nbsp;</div>
</div>

So why is 'rhythm' on a new line?

Answer 2

我认为问题在于你的代码笔中的单词之间缺少空格，如果你要添加一个空格（而不是 ）它似乎按照你的意愿工作（还记得在跨度之间放置空格）为了把事情推到另一条线上。

主要问题似乎是你在许多跨度中有一个长字。

Answer 3

 导致此问题。下一个单词的行不适合。

“HTML实体是一个非破坏性或硬性的空间。它呈现像普通空间”“，但阻止了”从那里发生换行：https://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

<span>之前的文本被强制换行

3 个答案: