I'm building a web app with React that generates random movie quotes...

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.

import React from 'react';
import Typed from 'typed.js';
import './App.css';
import quotes from './quotes.json';

const random_quote = () => {
  const rand = Math.floor(Math.random() * quotes.length);
  let selected_quote = quotes[rand].quote + ' - ' + quotes[rand].movie;
  return selected_quote;
}

const TypedQuote = () => {
    // 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(() => {
    const options = {
        strings: [
        random_quote(),
      ],
      typeSpeed: 30,
      backSpeed: 50,
    };
    
    // elRef refers to the <span> rendered below
    typed.current = new Typed(el.current, options);
    
    return () => {
      // Make sure to destroy Typed instance during cleanup
      // to prevent memory leaks
      typed.current.destroy();
    }
  }, [])

  return (
      <div className="type-wrap">
        <span style={{ whiteSpace: 'pre' }} ref={el} />
      </div>
  );
}

const App = () => {
  return (
    <>
      <div className='background' id='background'>
        <div className='quote-box'>
          <TypedQuote />
        </div>

        <button onClick={random_quote}>New Quote</button>
      </div>
    </>
  );
}

export default App;

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.