如何在内联块默认元素之前使用非间断空间，例如<按钮>？ [英] How can I use a non-breaking space before an inline-block-default element, such as a <button>?

问题描述

以下是一些HTML和CSS示例，用于显示问题：

 < p> thisssssssssssss& nbsp; issssssssss a test< / p为H. 
< p> thisssssssssssss& nbsp;< span> isssssssssss另一< / span>试验< / p为H. 
< p> thisssssssssssss& nbsp;<按钮> isssssssssss另一个< /按钮>试验< / p为H. 
 
 button {display：inline; } 
  

试试。 答案建议使用< nobr> 或 white-space：nowrap 。但是：

• 我将<按钮> 设置为 display：inline ，所以我甚至不明白为什么问题再次存在，因为它是内联元素。




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

   < p> {{SOME TEXT}}& nbsp;<按钮> ; FOO< /按钮>< / p为H. 
    

  我不知道 {{SOME TEXT}} 将包含空格或不包含空格。我可以在文本中添加额外的HTML ，但在上面的答案中链接的解决方案需要在文本本身中添加一个元素。

即使设置 display：inline; ，为什么会发生问题，以及如何在不修改文本本身的情况下解决问题？

解决方案

< p> thisssssssssssss< span id =b>& nbsp;<按钮> isssssssssss anotherrrrrrrrr< / button>< / span>试验< / p为H.

#b {
white-space：nowrap;
}


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

Here's some example HTML and CSS to show the problem:

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

Try it out on this JSFiddle, by resizing the output area.

Result (in Chromium on Ubuntu):

As you can see, there is a line break before the <button> in the third example, which I am trying to avoid. The   character seems as if it is being ignored (treated as a regular space). The desired result is that there is no break between "this" and "is," just like the first two examples.

I've already found Why do inline-blocks break after non-breaking space?. An answer there suggests using <nobr> or white-space: nowrap. However:

• I'm setting the <button> to display: inline, so I don't even understand why the problem exists anymore since it's an inline element.

• I need a pure CSS solution, without any extra HTML in the text before the button. My HTML has to look something like this:

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

  and I don't know whether the {{SOME TEXT}} will contain spaces or not. I can add extra HTML around the text, but the solution linked in the answer above requires adding an element within the text itself.

Why is the problem happening even when setting display: inline;, and how can I solve it without modifying the text itself?

解决方案

Can you put a span before the nbsp?

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

#b {
    white-space: nowrap;
}

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

这篇关于如何在内联块默认元素之前使用非间断空间，例如<按钮>？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！