如何在inline-block-default元素之前使用不间断空格,例如<button>？

Question

这是一些示例HTML和CSS来显示问题:

<p>thisssssssssssss&nbsp;issssssssss a test</p>
<p>thisssssssssssss&nbsp;<span>isssssssssss another</span> test</p>
<p>thisssssssssssss&nbsp;<button>isssssssssss another</button> test</p>

button { display: inline; }

通过调整输出区域的大小来试试这个JSFiddle.

结果(在Ubuntu的Chromium中):

如您所见,<button>在第三个示例中有一个换行符,我试图避免.该 角色好像被忽略了它(作为一个普通的空间处理).期望的结果是"this"和"is"之间没有中断,就像前两个例子一样.

我已经找到了为什么内联块在不间断的空间后会中断？.答案在那里建议使用<nobr>或white-space: nowrap.然而:

• 我正在设置,所以我甚<button>至不理解为什么问题存在,因为它是一个内联元素.display: inline

• 我需要一个纯CSS解决方案,在按钮之前的文本中没有任何额外的HTML.我的HTML必须看起来像这样:

  <p>{{SOME TEXT}}&nbsp;<button>foo</button></p>
  

  我不知道是否{{SOME TEXT}}会包含空格.我可以在文本周围添加额外的HTML ,但在上面的答案中链接的解决方案需要在文本本身中添加一个元素.

为什么即使在设置时问题也会发生display: inline;,如何在不修改文本本身的情况下解决问题呢？

Answer 1

你能在之前放一个跨度吗？

<p>thisssssssssssss<span id="b">&nbsp;<button>isssssssssss anotherrrrrrrrr</button></span> test</p>

#b {
    white-space: nowrap;
}

http://jsfiddle.net/bggk33du/10/