How to add line break in CSS changing text animation?-CodePudding

I am building website using squarespace and adding custom CSS to replicate the design with text changing animation that would change the text every 3 seconds. The text content is broken into two lines and scaled to fit the text box.

I have code block in which I have added html header h2.

<h2 style="text-align:center; font-size:48px" >
  <span style="display:block;"></span>
</h2>

Custom CSS

.animated-text {
  h2 {
    display: inline-block !important;
  }
  span::before {
    content: "Every body is different, and every workout is unique";
    animation: animate infinite 5s;
  }
  @keyframes animate {
    0% {
      content: "Every body is different, and every workout is unique";
    }
    50% {
      content: "Evidence-based, and fitness trainer reviewed Affordable, accessible, intentional"
    }
  }
}

Attached are the screenshot of the design which I am trying to implement

Actual Design - Text block 1

Actual Design - Text block 2

However, my actual result is not exact as I am trying to wrap the text to fit the text block. Is it possible to add line break in text content in span animation content or what would be the best way to replicate the design?

Thank You!

Actual result - Text block 1

CodePudding user response：

try this,

.animated-text {
  h2 {
    display: inline-block !important;
  }
  span::before {
     content: "Every body is different, \a and every workout is 
     unique";
     white-space: pre; /* this is important */
    animation: animate infinite 5s;
  }
  @keyframes animate {
    0% {
      content: "Every body is different, \a and every workout is unique";
    }
    50% {
      content: "Evidence-based, and fitness trainer reviewed \a Affordable, accessible, intentional"
    }
  }
}

add line breaks using CSS

  content: "paragraph 1 \a paragraph 2"; /* \a is new line character */
  white-space: pre;