es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • CSS Bootstrap flex width – cómo evitar que el elemento padre se expanda demasiado debido a un texto de una sola línea? Elipsis

CSS Bootstrap flex width – cómo evitar que el elemento padre se expanda demasiado debido a un texto de una sola línea? Elipsis

20 Jul, 2023 Programación

Me he encontrado con un problema complejo de CSS y flexbox. El problema era utilizar estas propiedades:

   ​text-overflow: ellipsis;
   ​white-space: nowrap;
   ​overflow: hidden;

pero luego, si el texto era demasiado largo, se expandía el ancho del componente padre, en lugar de agregar “…” y sí, PODRÍAMOS ESTABLECER UN ANCHO MANUAL para el padre, por ejemplo, 20%, o para el hijo, por ejemplo, 250px, pero todos sabemos que es una mala solución (YA LO SÉ, así que no me penalices, no encontré ninguna respuesta correcta en la web).

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una solución al problema de desbordamiento de texto con Flexbox

    Si te enfrentas a un problema en el que el componente padre se extiende en lugar de agregar puntos suspensivos al texto, incluso después de usar las propiedades text-overflow: ellipsis;, white-space: nowrap; y overflow: hidden; en tu CSS con Flexbox, hay una solución simple para este problema.

    En lugar de usar la propiedad overflow: hidden; en el componente padre, puedes aplicarla a un elemento hijo con un ancho establecido al 100%. Por ejemplo, si tu texto está dentro de una etiqueta “, puedes agregar una etiqueta <span> dentro de ella y aplicar la propiedad overflow: hidden; a esta etiqueta con width: 100%;.

    Aquí tienes un ejemplo de código:

    <div class="parent">
  <p>
    <span>Aquí va el texto largo...</span>

</div>

    .parent {
  display: flex;
}

p {
  display: flex;
  flex: 1;
}

span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

    Al aplicar width: 100%; al elemento hijo, permite que el elemento tome el mismo ancho que su padre y trunque el texto si es demasiado largo con puntos suspensivos.

    Esta solución es mejor que establecer un ancho manual para los elementos padre o hijo, ya que se ajusta automáticamente al ancho del padre y mantiene tu código flexible.

Comments are closed.