How to contain bounding box when element wraps on white-space?

Question

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.

Well the content will span a varying amount of lines, sure, but you'll still have the same space between the pink box and the line :) — Obsidian Age, Feb 22 '18 at 00:39
@ObsidianAge I'm not sure I understand what you're saying so if you could put that into working code, that would be great :) — rfgamaral, Feb 22 '18 at 00:40

score 1 · Answer 1 · answered Feb 22 '18 at 00:43

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.

answered Feb 22 '18 at 00:43

Obsidian Age

41,205
10
48
71

I see what you meant now but unfortunately it doesn't work as I expect it. My real examples won't work with a fixed width like that because they vary too much. I also want the text to be displayed in one line if the parent container allows it, multi-line if it doesn't. Sorry for not making that clearer. – rfgamaral Feb 22 '18 at 00:47
And if you wanted to get fancy you could use a fixed percentage or `vw` so the span would change based on browser width. Getting **really** fancy you could probably also use `calc()` – Jon P Feb 22 '18 at 00:53
No worries! You could always make use of media queries for something like that. Like only setting a fixed `width` at a certain breakpoint. I don't think a variable width would work in this case, as it would 'offset' the constraining `width`, sadly. – Obsidian Age Feb 22 '18 at 00:54
Also if you change `width` to `max-width` you might be able to get closer to the end goal. – Jon P Feb 22 '18 at 00:59
I want to have just `20px` between the lines and the text, no matter if the text is single line or multi line and a fixed width just won't work. – rfgamaral Feb 22 '18 at 01:04
@RicardoAmaral is this not what you are after: https://jsfiddle.net/egwwp3hx/ ? The only difference is `max-width` instead of `width`. – Jon P Feb 22 '18 at 01:32
@JonP Almost... If you drag the preview container to make it wide, at least the second example text should fit in a single line but it remains in two lines. The text wrapping should be responsive too. – rfgamaral Feb 22 '18 at 01:34
@RicardoAmaral How about: https://jsfiddle.net/egwwp3hx/1/ ? If that's what you need hopefully Obisian will edit them into their answer and you can accept it/ – Jon P Feb 22 '18 at 01:42
@JonP It's better but it still doesn't maintain a max of `20px` between the lines and the text. This question has been marked as duplicate and the answers on those questions resort mostly to JS to fix this issue, which I didn't want to :( – rfgamaral Feb 22 '18 at 09:35

How to contain bounding box when element wraps on white-space?

1 Answers1