0

I am trying to recreate the effect below in which the white background only follows the length of the text. The issue I am running in to is that the words appear on different lines depending on page width. SO the word break is not guaranteed and I can not wrap in spans as I need the total width to be the width of the longest line shown, but the background only as wide was each line.

I currently have the following code.

.signup-heading {
  max-width: 39%;
  position: absolute;
  left: 7%;
  top: 12%;
}

.signup-heading > h2 {
  display: block;
  word-wrap: break-word;
  font-family: 'Circular';
  font-family: CircularStd;
  font-size: 45px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: normal;
  color: #2c2a2a;
}
<div className="signup-heading">
        <h2>Hi there, we are so happy to have you here!</h2>
      </div>

enter image description here

ender554
  • 47
  • 1
  • 7
  • in case you want some fun effects: https://stackoverflow.com/a/62341241/8620333 / https://stackoverflow.com/a/53882402/8620333 – Temani Afif Jul 08 '20 at 20:42

1 Answers1

1

You can try with display: inline

body {
  background: #f0f0f0;
}

.signup-heading {
  max-width: 39%;
  position: absolute;
  left: 7%;
  top: 12%;
}

.signup-heading > h2 {
  display: inline;
  background: #fff;
  word-wrap: break-word;
  font-family: 'Circular';
  font-family: CircularStd;
  font-size: 45px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: normal;
  color: #2c2a2a;
}
<div class="signup-heading">
  <h2>Hi there, we are so happy to have you here!</h2>
</div>
doğukan
  • 23,073
  • 13
  • 57
  • 69
  • Amazing! I knew it was just some silly little thing, I had tried inline with a different set up before and it did not work so I just forgot to try it again. Thank you so much! – ender554 Jul 08 '20 at 18:25