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 </h1><!--
--><h1 class="header">information </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;
}