Estoy creando una aplicación web con React que genera citas aleatorias de películas...

El problema surge cuando la cita es demasiado larga y se desborda fuera del div principal... Intenté alterar el css con display flex y flex-wrap configurado para envolver. no funciona Aquí está mi código.

 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;

Tengo esta idea donde podría implementar una función que agregue '\n' después de 10 palabras o tal vez después de un '.' o ',' (podría implementar algo de lógica aquí). Pero esto parece una posibilidad remota. ¿Hay una manera más elegante de hacer esto? Cualquier ayuda sería apreciada.