Estoy intentando hacer una especie de salto de línea para que el texto que sea demasiado largo no se desborde horizonalmente sino que se vaya ubicando verticalmente. Es decir que la línea de texto sigue indefinidamente de manera horizontal sobreponiéndose en otros elementos.
En la imagen se puede ver a lo que me refiero, el texto que es demasiado largo pasa por encima de unos botones, la idea es que de alguna manera se "rompa" el texto para que se ubique de manera vertical:
Hasta el momento he intentado con lo siguiente en CSS:
.scroll{
height: 90px;
max-width: 450px;
word-break: break-all;
}
Y en el HTML:
<tbody class="list">
@foreach ($disciplines as $discipline)
<tr>
<td>{{$discipline->discipline_id}}</td>
<td>{{$discipline->discipline_name}}</td>
<td>
{{-- texto muy largo --}}
<div class="scroll">
{{$discipline->discipline_description}}
</div>
</td>
</tr>
@endforeach
</tbody>
La verdad no sé porque no funciona, ya he visto varia documentación que explica mas o menos lo mismo del CSS, pero sigue igual, no sé si no estoy omitiendo algo. Agradezco cualquier ayuda.
Siguiendo las recomendaciones de las respuestas dadas actualizo la pregunta con la información de los estilos a los que están sujetos los elementos en el HTML.
Todos los estilos que están en la tabla:
.m-2
{
margin: .5rem !important;
}
.table-responsive
{
display: block;
overflow-x: auto;
width: 100%;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.table
{
width: 100%;
margin-bottom: 1rem;
background-color: transparent;
}
.table td
{
padding: 1rem;
vertical-align: top;
border-top: 1px solid #e9ecef;
}
.align-items-center
{
align-items: center !important;
}
Código HTML completo:
<div class="table-responsive m-2">
<table class="table align-items-center">
<tbody class="list">
@foreach ($disciplines as $discipline)
<tr>
<td>{{$discipline->id}}</td>
<td>{{$discipline->discipline_name}}</td>
<td>
{{-- texto muy largo --}}
{{$discipline->discipline_description}}
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
vertical-align: top;
.