htmlcssspecifications

Which HTML elements can break into several rectangles?

CSS styles such as display: inline allow <span> and <div> to break (fragment) into several rectangles on separate lines, whereas <fieldset> and <button> with the same CSS rules remain one rectangle:

span, div, fieldset, button {
  display: inline;
  border: 1px solid red;
}
Lorem <span>     ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</span> consequat.<hr>
Lorem <div>      ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</div> consequat.<hr>
Lorem <fieldset> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</fieldset> consequat.<hr>
Lorem <button>   ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</button> consequat.<hr>

Is there info (in the spec or browser-specific) regarding which HTML elements have or don't have this breakability/fragmentability trait?

The "CSS Fragmentation Module" spec says "inline breaking is not covered here; see [CSS2]/[CSS3TEXT]". The "CSS Text Module Level 3" spec mentions "break" over 1,000 times but doesn't mention <div> or <fieldset>. So I'm not sure where to look.

Solution

  • The principal concept is the atomic inline-level box. Non-atomic boxes fragment across lines, atomic boxes cannot.

    Only inline level boxes can be non-atomic, and they must be non-replaced. So a replaced element like <img> is always atomic, and so are inline-block, inline-table, inline-flex and inline-grid boxes.

    So it's essentially just display:inline elements.

    Which leaves the special cases of fieldset and button. These are covered in the HTML living specification rendering section.

    For both button and fieldset, it says:

    [... otherwise], if the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'.

    Behaving as inline-block, they are both atomic.