为什么内联块在非中断空间后断开？

本文介绍了为什么内联块在非中断空间后断开？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述 29岁程序员，3月因学历无情被辞！一些HTML代码： Hello World你是怎么样的。& nbsp; Entrepreneur< / p& Hello World您好！ Entrepreneur< / p& 一些CSS： #one span { display：inline-block; } p { font-family：Arial; font-size：16px; width：200px; } 第二段的行为与我预期的一样。 $ b $ 我的问题是，为什么第一个行为不同，因为span是内联块。 c> inline-block span忽略& nbsp; 和 span 和前面的单词？谢谢！示例fiddle 这里。解决方案因此，看起来行为不一致浏览器：在IE11和最后几个版本中，我已经能够测试这一点，无论 span 是一个内联框或一个inline-block框，IE遵循不间断空格，并且不将 span 在所有其他浏览器中，行为与问题中的描述相同。当 span 是inline-block时，不间断空格似乎被忽略;相反，它被强制在它自己的线上并与其前面的词分开。注意，不间断空间仍然存在; ，它会显示在第一行的末尾，紧接在单词之后。这里的一些其他人的解释似乎比较健全：inline-block的格式像一个块框，除了lay inline，所以这可能是一个原因，它不总是与行内框相同。但是，我没有能够在规范中找到任何确认这一点。也不解释为什么IE行为的方式，或者确实，IE是否行为不正确或不同。 CSS2.1规范在部分9.2.2 ，其本身相当于上述解释：不是内联框的内联级框（例如替换的行内元素，inline-block元素和inline-table元素） em> 但是它在原始内联格式框中没有完全描述换行符和原子内联级别框之间的交互，更不用说不间断空间对此交互的影响。因此，不幸的是，似乎没有足够的解释任何一个浏览器的行为。甚至在CSS3 Text模块中查看，但它所有关于换行符和原子内联的说法是 this ：替换元素或其他原子内联的换行行为是等同于对象替换字符（U + FFFC）。 ...我尝试使用U + FFFC，结果是完全不可靠的： Hello World您好吗？& nbsp; Entrepreneur< / p& Hello World您好！ Entrepreneur< / p& Hello World您好！& nbsp;& #xfffc; 即： Firefox打破了这一行， Chrome甚至不尝试呈现字符。也许我只是误解CSS3 Text模块的引用，也许浏览器没有正确实现某些控制字符，不能肯定。但是，如果有什么，我开始怀疑这个行为真的在任何CSS规范中定义。 Some HTML code:Hello World how are you. EntrepreneurHello World how are you. EntrepreneurSome CSS:#one span { display: inline-block;}p { font-family: Arial; font-size: 16px; width: 200px;}The second paragraph behaves as I expect it.The first however behaves differently, due to the span being an inline-block.My question is, why does the inline-block span ignore the   and break line between the span and the preceding word?Thanks!Example fiddle here. 解决方案 So, it looks like the behavior isn't consistent across browsers:In IE11 and the last few versions I've been able to test this on, whether the span is an inline box or an inline-block box, IE respects the no-break space and does not separate the span from its preceding word.In all other browsers, the behavior is as described in the question. The no-break space appears to be ignored when the span is an inline-block; instead, it gets forced onto its own line and separated from its preceding word. Note that the no-break space is still there; it appears at the end of the first line, just after the word, which can be seen by highlighting the line in Firefox.The explanation given by some others here seems rather sound: an inline-block is formatted like a block box, except laid inline, so that could be a reason why it doesn't always behave the same as an inline box. However, I haven't been able to find anything in the specification that confirms this. Nor does it explain why IE behaves the way it does, or indeed, whether IE is behaving incorrectly or just differently.The CSS2.1 spec does state the following in section 9.2.2, which lends itself quite well to the above explanation: Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.But it does not fully describe the interaction between line breaks and atomic inline-level boxes, let alone the effect a no-break space would have on this interaction. So, unfortunately, there does not appear to be a sufficient explanation for the behavior of any one browser.I've even looked in the CSS3 Text module, but all it has to say with respect to line breaks and atomic inlines is this: The line breaking behavior of a replaced element or other atomic inline is equivalent to that of the Object Replacement Character (U+FFFC).... and when I try it with a U+FFFC, the results are completely unreliable:Hello World how are you. EntrepreneurHello World how are you. EntrepreneurHello World how are you. Namely:IE behaves most consistently, breaking all three paragraphs the same way.Firefox breaks the line with the character the same way as it does the second paragraph, respecting the no-break space.Chrome does not even attempt to render the character.Maybe I'm just misunderstanding the quote from the CSS3 Text module, maybe browsers aren't implementing certain control characters correctly, I can't say for certain. But, if anything, I'm starting to doubt that this behavior is really defined in any CSS specification at all. 这篇关于为什么内联块在非中断空间后断开？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！上岸，阿里云！