How to add line break in CSS changing text animation?

Question

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" class="animated-text">
  <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

Vinod Liyanage · Accepted Answer · 2022-08-25T06:15:31.083

1

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;

edited Aug 25 '22 at 06:15

answered Aug 25 '22 at 06:07

Vinod Liyanage

945
4
13

Thank you @Vinod Liyanage. Is it possible to scale text that can remove the white space from line 1 or 2 depending on the text fit. If you compare both of these you can see what i mean https://i.stack.imgur.com/CRdsd.png https://i.stack.imgur.com/3gYQJ.png – mbl2014 Aug 25 '22 at 06:25
the way to do that is by using two span tags. the first span shows the first paragraph and the second span show the second paragraph. this way you can style both of them separately. – Vinod Liyanage Aug 25 '22 at 06:57

How to add line break in CSS changing text animation?

1 Answers1