Mi texto parece ocultar por defecto piezas particulares que no encajan en un div. Me gustaría que todo el bloque desapareciera una vez que ya no quepa.
¿Hay alguna manera de hacer esto?
Aquí hay una aplicación de muestra de lo que tengo actualmente:
const App = () => { return ( <div className='container'> <p className='text'> If you don't fit you need to be hidden. If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.If you don't fit you need to be hidden.</p> </div> ) } ReactDOM.render( <App />, document.getElementById('app') ); .container { border: 1px solid red; height: 150px; width: 150px; overflow: hidden; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="app"></div>TL; DR: ejemplo de trabajo aquí .
No creo que haya una forma css de hacer esto, pero como estás usando React, puedes aprovechar las referencias y calcular el tamaño del elemento.
Tenga en cuenta que no puede usar un useRef estándar (hasta donde yo sé), porque los cambios en estos no activan una nueva representación, por lo que React no sabrá cuándo se desborda su contenedor. En su lugar, puede usar una referencia de devolución de llamada y almacenarla en el estado.
const [textRef, setTextRef] = useState(null); ... <div ref={(newRef) => setTextRef(newRef)} className="container"> ... </div> Ahora que tiene una referencia al elemento, puede calcular si se desborda o no comparando las propiedades scrollHeight y offsetHeight .
const overflows = textRef.scrollHeight > textRef.offsetHeight; Tienes que hacer esto dinámicamente cuando el elemento cambia, así que colócalo en un useEffect con textRef como una dependencia. Luego almacene la propiedad "desbordamientos" en el estado para usarla más tarde.
const [overflows, setOverflows] = useState(false); useEffect(() => { if (textRef) { const overflows = textRef.scrollHeight > textRef.offsetHeight; setOverflows(overflows); } }, [textRef]);Ahora que sabe si un elemento se desborda y tiene esa información en el estado, simplemente puede representar el elemento de forma condicional.
<div ref={(newRef) => setTextRef(newRef)} className="container"> {!overflows && <p className="text">If you don't fit you need to be hidden...</p>} </div>Mire este ejemplo de trabajo donde puede ver que un elemento se muestra porque tiene menos texto y cabe, mientras que el otro está oculto porque se desborda.