How to contain bounding box when element wraps on white-space? [duplicate] - html

Question

This question already has answers here:
Make container shrink-to-fit child elements as they wrap
(4 answers)
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
How to center a flex container but left-align flex items
(9 answers)
Closed 5 years ago.
Given the following example...
/* Custom reset */
html {
margin: 20px 0;
}
body {
margin: 0 50px;
}
h1 {
margin: 0;
}
/* Problem code */
h1 {
background-color: lightblue;
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
h1::before,
h1::after {
background-color: purple;
content: "";
display: inline-block;
flex: 1 0 auto;
height: 3px;
}
h1::before {
margin-left: -50px;
}
h1::after {
margin-right: -50px;
}
h1>span {
background-color: lightpink;
flex: 0 1 auto;
padding: 0 20px;
}
<h1>
<span>Fooooooooooo & Baaaaaaaaaar</span>
</h1>
When you run the snippet you'll notice a pink box with wrapped text (because it doesn't fit all in one line) and purple lines on the sides, like this:
And this is how it looks when the text doesn't wrap (which is OK and it's what I want):
In the first image there's too much space between the text and the purple lines and I need it to be only 20px, like the second image.
In other "words", I'm looking to achieve this:
(simulated image)
It goes without saying that I need this to work with dynamic content (the text could be anything, have any number of words, short or long). I also need the text to be in a single line if it fits, otherwise multiline and always with 20px max between the purple lines and the text.

Answer 1

If I understand your end goal correctly, you could simply set a fixed width on the <span>. This will ensure that there's the desired amount of 'margin' around the pink box, and it will also work with variable content; if there's too much content to display on the one line, it will simply create more lines. Because the new lines are also constrained by the fixed width, the pink box will still retain the same amount of 'margin':
/* Custom reset */
html {
margin: 20px 0;
}
body {
margin: 0 50px;
}
h1 {
margin: 0;
}
div+div {
margin-top: 20px;
}
/* Problem code */
h1 {
background-color: lightblue;
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
h1::before,
h1::after {
background-color: purple;
content: "";
display: inline-block;
flex: 1 0 auto;
height: 3px;
}
h1::before {
margin-left: -50px;
}
h1::after {
margin-right: -50px;
}
h1>span {
background-color: lightpink;
flex: 0 1 auto;
padding: 0 20px;
width: 350px;
}
<h1>
<span>Fooooooooooo & Baaaaaaaaaar</span>
</h1>
Obviously the value you would need for the fixed width would depend on the context, but 350px works pretty well for your example.