Why Do Inline-Blocks Break After Non-Breaking Space

Why do inline-blocks break after non-breaking space?

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:

<p id='one'>Hello World how are you. <span>Entrepreneur</span></p>

<p>Hello World how are you. <span>Entrepreneur</span></p>

<p>Hello World how are you. </p>

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.

How can I use a non-breaking space before an inline-block-default element, such as a button ?

Can you put a span before the nbsp?

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

#b {
    white-space: nowrap;
}

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

Preventing line breaks between inline-block elements longer than 1 line

Width of the inline-block elements is automatically determined by its contents. As 1st span element is occupying max width of the row, 2nd element is getting wrapped to next line and same with 3rd span as well. Last two elements are in same line because they have the enough space to occupy.

Simple solution of this will be changing display : inline-block to display:inline

Inline-block vs inline elements in terms of line-breaks

The line break happens because the the inline block cannot be split across multiple lines like a normal inline element. It is simply one entire "block unit" that is displayed inline. If that entire unit does not fit, then it will all be wrapped down to the next line.

Prevent inline elements from line breaking within their group

Add this in your css

Edited so that they are inline with enough width

p {
width: 10ex;
border: thin solid red;
display:inline;
}
span{
display:inline-block;
}

Prevent line break after inline-block

It looks like the first character doesn't need to be in the <nobr> element, so this will work:

<nobr><span class="inlineblock"></span></nobr>wide...

Still ugly, but definitely less ugly! It works on Firefox and Chrome at least.

How to display inline blocks without breaking them on new line when shrinking parent

Add white-space:nowrap and overflow:hidden to outer:

.outer {
    width: 100%;
    border: 1px solid black;
    white-space:nowrap;
    overflow:hidden;
}

jsFiddle example

Breaking to a new line with inline-block?

Remove all br tags and use display: table.

.text span {
   background: rgba(165, 220, 79, 0.8);
   display: table;
   padding: 7px 10px;
   color: white;
}
.fullscreen .large { font-size: 80px }

Explanation: The table wraps the width of its content by default without setting a width, but is still a block level element. You can get the same behavior by setting a width to other block-level elements:

<span style="display:block;border:1px solid red;width:100px;">Like a default table.</span>
<code>null</code>

Notice the <code> element doesn't flow inline with the <span> like it would normally. Check it out with the computed styles in your dev tools. You'll see pseudo margin to the right of the <span>. Anyway, this is the same as the table, but the table has the added benefit of always forming to the width of its content.

Mark space for :after content non-breaking

I’m afraid the problem here is that when you set display: inline-block on the pseudo-element, it becomes an element that is treated as external to text (comparable to an image) and may be wrapped into the next line, even when it immediately follows a character. And if you let it default to display: inline, the width property does not apply to it, so it just doesn’t do what you want.

But you might consider a different approach. Instead of using CSS to create a visual object that looks like a filled circle, for example, you can use a character like U+25CF BLACK CIRCLE “●” and color it as desired. This sets obvious limitations, since shapes you would like to use might not exist as characters, or those characters might not be sufficiently well supported in fonts. But in simple cases, the approach might be feasible:

.navTreeItem .state-restricted:after {

  content: "\25cf";

  color: red;

}

<div class=navTreeItem>

<div class=state-restricted>I really, really, really do want to prevent any

line break between this text and the :after pseudo-element.</div>

</div>

CSS when inline-block elements line-break, parent wrapper does not fit new width

You can't. By default, inline-block elements have a shrink-to-fit width:

The shrink-to-fit width is:

min(max(preferred minimum width, available width), preferred width).

Then,

When preferred minimum width <= preferred width <= available width, the width will be the preferred width, as you desire.
When available width <= preferred minimum width <= preferred width, the width will be the preferred minimum width, as you desire.
When preferred minimum width <= available width <= preferred width, the width will be the available width, even if you don't like it.

If you really don't want this, I guess you could add a resize event listener with JS, and set the desired width manually.

Why Do Inline-Blocks Break After Non-Breaking Space