¿Cómo hacer que los enlaces se envuelvan o se desplacen en un elemento de columna en Angular?
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>
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
: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:
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 decol-md-4
para que ambas columnas sean más anchas:Esto creará un diseño más equilibrado y reducirá la posibilidad de que la primera columna se solape con la segunda columna.