0
215
Vistas¿Cómo hacer que solo responda el componente flexible medio?
Tengo un componente principal que tiene tres componentes secundarios. La display is set to flex y flex-direction to row .
aquí está el código
Parte JS:
<div className='Container'> <div className='Text1'>26 Dec 22</div> <div className='Text2'>Lorem ipsum dolor sit amet</div> <div className='Text3'>128K</div> </div>Parte CSS:
.Container{ display: flex; flex-direction: row; background-color: white; padding: 20px 20px 20px 20px; justify-content: space-evenly; gap:10px; } .Text1{ width: 100px; white-space: nowrap; } .Text2{ text-align: left; width: 400px; } .Text3{ width: 100px; } Aquí está la imagen de la salida: 
Cuando cambio de la vista de escritorio a la vista móvil, quiero que mi resultado sea así 
Como se puede ver, solo se eliminó el texto del componente central y se agregó ...
En mi código anterior, cuando cambio la vista, obtengo el resultado como
Guíeme sobre cómo disminuir el ancho solo del componente medio y también agregar ... cuando desaparezca parte del componente medio.
1 Respuestas
Responde la pregunta0
En su caso, necesita el text-overflow: ellipsis; propiedad CSS y utilícela en el elemento central.
La propiedad CSS de desbordamiento de texto establece cómo se señala a los usuarios el contenido de desbordamiento oculto. Se puede recortar, mostrar puntos suspensivos ('…') o mostrar una cadena personalizada. Documentación de MDN
.Container { display: flex; flex-direction: row; background-color: white; padding: 20px 20px 20px 20px; justify-content: space-evenly; gap: 10px; } .Text1 { width: 100px; white-space: nowrap; } .Text2 { text-align: left; width: 400px; text-overflow: ellipsis; /* new line */ overflow: hidden; /* new line */ white-space: nowrap; /* new line */ } .Text3 { width: 100px; } <div class="Container"> <div class="Text1">26 Dec 22</div> <div class="Text2">Lorem ipsum dolor sit amet</div> <div class="Text3">128K</div> </div>