title: How to wrap text typed with 'typed.js' ReactJs?
body: <p>I'm building a web app with React that generates random movie quotes...
  <a href="https://i.stack.imgur.com/8BFbB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8BFbB.jpg" alt="Here is a preview of the web app" /></a></p>
  <p>The problem arises when the quote is too long and it overflows outside the parent div...
  I've tried altering the css with display flex and flex-wrap set to wrap. It does't work.
  Here is my code.</p>
  <pre><code>import React from 'react';
  import Typed from 'typed.js';
  import './App.css';
  import quotes from './quotes.json';
  
  const random_quote = () =&gt; {
    const rand = Math.floor(Math.random() * quotes.length);
    let selected_quote = quotes[rand].quote + ' - ' + quotes[rand].movie;
    return selected_quote;
  }
  
  const TypedQuote = () =&gt; {
      // Create reference to store the DOM element containing the animation
      const el = React.useRef(null);
    // Create reference to store the Typed instance itself
      const typed = React.useRef(null);
  
    React.useEffect(() =&gt; {
      const options = {
          strings: [
          random_quote(),
        ],
        typeSpeed: 30,
        backSpeed: 50,
      };
      
      // elRef refers to the &lt;span&gt; rendered below
      typed.current = new Typed(el.current, options);
      
      return () =&gt; {
        // Make sure to destroy Typed instance during cleanup
        // to prevent memory leaks
        typed.current.destroy();
      }
    }, [])
  
    return (
        &lt;div className=&quot;type-wrap&quot;&gt;
          &lt;span style={{ whiteSpace: 'pre' }} ref={el} /&gt;
        &lt;/div&gt;
    );
  }
  
  const App = () =&gt; {
    return (
      &lt;&gt;
        &lt;div className='background' id='background'&gt;
          &lt;div className='quote-box'&gt;
            &lt;TypedQuote /&gt;
          &lt;/div&gt;
  
          &lt;button onClick={random_quote}&gt;New Quote&lt;/button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>I have this idea where I could implement a function that adds '\n' after like 10 words or like maybe after a '.' or ',' (I could implement some logic here). But this seems like a longshot. Is there a fancier way to do this?? Any help would be appreciated.</p>