need background color on background of text only, which dynamically changes width

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

Add Comment
1 Answer(s)

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>

Answered on July 16, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.