an inline-block label does a linebreak because width: auto calculates the real width wrong.

an inline-block label does a linebreak because width:auto calculates the real width wrong.

So for example an input followed by a label having the following css: 

label {
  display: inline-block;
  width: auto;
}

This label does a line-break if the label has a specific length. So it depends on the content of that label.

The error looks like this:

[] this is a example lab
   el text


If you would put some letter in this setence, everything will be ok again.

[zalan]

Could you attach or link a test case with this unintentional line break?

Here is the HTML:

<div><input type="radio" id="uiSwitchtimer_sun_calendar" value="sun_calendar" name="switchtimer"><label for="uiSwitchtimer_sun_calendar">Astronomisch</label></div>


And the CSS:

label {
    margin: 0.0625rem 0;
    display: inline-block;
    box-sizing: border-box;
}

.formular label {
    width: 12.5rem;
    margin-right: 0.375rem;
    margin-left: 0.5rem;
    max-width: 100%;
}

.formular input+label {
    width: auto;
    max-width: 91%;
    vertical-align: top;
}

Sorry missed one div:

Here is the HTML:

<div class="formular"><div><input type="radio" id="uiSwitchtimer_sun_calendar" value="sun_calendar" name="switchtimer"><label for="uiSwitchtimer_sun_calendar">Astronomisch</label></div></div>

[Ahmad Saleem]

https://jsfiddle.net/8ef40mdq/show

I changed it into JSFiddle and I am not able to reproduce the line-break in Safari 16.1 and STP 157.

All browsers (Safari 16.1, STP157, Chrome Canary 109 and Firefox Nightly 108) render this as same. Can we mark this as "RESOLVED CONFIGURATION CHANGED"?

@Alan - Another IFC Progression? Thanks!

[zalan]

possibly! Thank you!