0

I am getting unexpected wrapping behavior in my header when I separate a sentence out into different elements.

I have tried every trick mentioned here: How do I remove the space between inline-block elements?. I have even applied font-size: 0 on the parent. The elements are display: inline-block; and the whitespace is removed (in this case commented out) between the elements.

Here is the Fiddle: https://jsfiddle.net/ax162cjq/1/.

It still doesn't work. There's plenty of window sizes where the sizing text wraps differently but jumping to 295px will show this behavior (the word "you" wraps to a third line when separated). I need these words separated and cannot combine them back into a single HTML element because I am going to be changing the word information with JS at times.

Here is my code:

<body>
  <div class="container"><h1 class="header">Find the&nbsp;</h1><!--
  --><h1 class="header">information&nbsp;</h1><!--
  --><h1 class="header">you need, instantly.</h1></div>
  <div class="container">
    <h1 class="header">Find the information you need, instantly.</h1>
  </div>
</body>

and the CSS:

.container {
  padding-top: 125px;
  font-size: 0;
  padding: 0 20px;
}

.header {
  margin: 0;
  display: inline-block;
  font-size: 32px;
  line-height: 46px;
}
Paulie_D
  • 95,305
  • 9
  • 106
  • 134
lm2285
  • 11
  • 1

1 Answers1

0

display: inline-block; means the element can share horizontal space but the entire element must be one line.

Switch to display: inline; and the element will be allowed to wrap the way you're expecting.

Edit: *And remove your &nbsp;'s (non-breaking spaces) to make the text wrap the same as the single h1 below it.

Sydney Y
  • 1,601
  • 1
  • 4
  • 13
  • Even if you switch it to ```display: inline;``` then the text behaves differently (it wraps differently at 350px). Plus, I do not want to do this as the text will be cut off and I want it to wrap normally on smaller screens. – lm2285 Feb 25 '20 at 02:22
  • @lm2285 does inline work if you wrap all the `h1`s in an inline-block element? – Sydney Y Feb 25 '20 at 03:18
  • It still does not work: https://jsfiddle.net/zyfqr193/. Just go to 350px width for the viewport on Fiddle and you'll see that they wrap differently. I want the text to wrap but I do not want the text to wrap differently even if they are separated out into different elements. – lm2285 Feb 25 '20 at 03:58