I am experimenting with a layout where each item is displayed in a single line, with the width of the items determined by their content. The desired output looks like this:
Intended result: (This feature is only supported in modern browsers)
.item {
padding: 10px;
background-color: skyblue;
}
.wrap {
width: max-content; /* supported only in modern browsers */
margin: 5px auto;
}<div class="item wrap">hello</div><!-- NO SPACE --><div class="item wrap">hey</div>I aim to achieve the same layout for IE9+ browsers without making changes to the HTML. Let's consider the parent element as the body tag.
If I apply white-space: pre-line to the parent element, it almost gives me the desired outcome:
Potential workaround attempted on my end:
.item {
padding: 10px;
background-color: skyblue;
}
.wrap {
display: inline-block;
}
body {
white-space: pre-line;
text-align: center;
}<div class="item wrap">hello</div>
<div class="item wrap">hey</div>However, there is no space between the .item elements in the HTML code, so this approach doesn't fully work.
Unsuccessful workaround due to lack of space between HTML tags:
.item {
padding: 10px;
background-color: skyblue;
}
.wrap {
display: inline-block;
}
body {
white-space: pre-line;
text-align: center;
}<div class="item wrap">hello</div><!-- NO SPACE --><div class="item wrap">hey</div>