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 /
  • ¿Cómo hacer que los enlaces se envuelvan o se desplacen en un elemento de columna en Angular?

¿Cómo hacer que los enlaces se envuelvan o se desplacen en un elemento de columna en Angular?

30 Jul, 2023 Programación

Tengo un elemento de fila que contiene dos columnas. Actualmente, mi primera columna a veces se extiende sobre mi segunda columna porque la parte problem.problem_description contiene un enlace realmente largo que se extiende demasiado lejos. Estoy intentando hacer que los enlaces realmente largos se envuelvan o puedan desplazarse. Si el problem.name es demasiado largo, se envuelve el nombre porque son palabras múltiples (lo cual es un comportamiento ideal).

Estoy utilizando Bootstrap y actualmente mi código se ve de la siguiente manera, ¿alguna idea?

<div *ngfor="let element of elements" class="row">
   <div class="col-md-4 border">
      <b>{{element.name}}</b>
      <p *ngfor="let problem of element.problems" class="border">
         <b><u>Nombre del problema:</u></b> {{problem.name}}<br>
         <u>Descripción del problema:</u> {{problem.problem_description}}<br>
      </p>
   </div>
   <div class="col-md-4 border">
      <button>Ver problemas similares</button>
      <p class="border">
         //... cosas añadidas
      </p>
   </div>
</div>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que los enlaces largos se envuelvan o desplacen en la primera columna, puedes agregar el siguiente CSS al elemento problem.problem_description:

    word-wrap: break-word;
overflow: auto;

    Esto asegurará que los enlaces largos se envuelvan en la siguiente línea en lugar de extenderse hacia afuera, y que se puedan desplazar si exceden la altura del elemento. Aquí está cómo se vería tu código actualizado:

    <div *ngfor="let element of elements" class="row">
   <div class="col-md-4 border">
      <b>{{element.name}}</b>
      <p *ngfor="let problem of element.problems" class="border">
         <b><u>Nombre del Problema:</u></b> {{problem.name}}<br>
         <u>Descripción del Problema:</u> <span style="word-wrap: break-word; overflow: auto;">{{problem.problem_description}}</span><br>
      </p>
   </div>
   <div class="col-md-4 border">
      <button>Ver Problemas Similares</button>
      <p class="border">
         //... cosas añadidas
      </p>
   </div>
</div>

    Además, es posible que desees ajustar el ancho de las columnas para obtener una mejor simetría y legibilidad. Por ejemplo, podrías usar col-md-6 en lugar de col-md-4 para que ambas columnas sean más anchas:

    <div *ngfor="let element of elements" class="row">
   <div class="col-md-6 border">
      <b>{{element.name}}</b>
      <p *ngfor="let problem of element.problems" class="border">
         <b><u>Nombre del Problema:</u></b> {{problem.name}}<br>
         <u>Descripción del Problema:</u> <span style="word-wrap: break-word; overflow: auto;">{{problem.problem_description}}</span><br>
      </p>
   </div>
   <div class="col-md-6 border">
      <button>Ver Problemas Similares</button>
      <p class="border">
         //... cosas añadidas
      </p>
   </div>
</div>

    Esto creará un diseño más equilibrado y reducirá la posibilidad de que la primera columna se solape con la segunda columna.

Comments are closed.