1

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:

referncia_visual

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>
2
  • 1
    Eliminé mi respuesta por dos razones: 1- La respuesta de @triby está mas completa. 2- Aún con los estilos que compartes el comportamiento sigue siendo el mismo, en el snippet funciona sin problema. Intenta depurar dejando la tabla sin clases ni estilos a ver que resultado obtienes. Puedes probar tambien comentando la propiedad vertical-align: top;.
    – DjCrazy
    Commented el 25 may. 2022 a las 0:52
  • Haz clic derecho en una de las celdas con texto largo y selecciona "Inspeccionar", ahí puedes ver los estilos que se están aplicando. Agrégalos a la pregunta, de preferencia como código, no creo que en una captura de pantalla se pueda ver todo.
    – Triby
    Commented el 25 may. 2022 a las 15:27

2 respuestas 2

1

Importante: Esto quizá debería ser un comentario, pero es mejor poner un ejemplo y esperar a que edites tu pregunta para agregar más detalles acerca de los estilos y librerías que estás usando. Posteriormente, voy a editar (o borrar) esta respuesta.

Por defecto, las celdas se van a adaptar al contenido y realizarán saltos de línea cuando sea necesario, tal como puedes ver en este ejemplo:

table {
    max-width: 500px;
    margin:0 auto;
}
/* Alinear contenido verticalmente */
table td {
    vertical-align: top;
}
<table>
    <tbody class="list">
        <tr>
          <td>ID</td>
          <td>Nombre</td>
          <td>Descripción corta, no hay problema</td>
          <td>Otra celda</td>
        </tr>
        <tr>
          <td>ID</td>
          <td>Nombre</td>
          <td>Descripción usando un texto demasiado largo y que se debe adaptar a la
              celda sin necesidad de ponerlo dentro de un div.</td>
          <td>Otra celda</td>
        </tr>
    </tbody>
</table>

El problema sería que estés usando otras reglas CSS que eviten ese comportamiento, tal vez posición relativa (o absoluta), que saca los elementos del contexto actual y hace que sobrepasen los límites del contenedor.

Si ese es el caso, entonces puedes forzar el ancho máximo para ajustar al contenedor padre.

1
  • gracias por la respuesta, entiendo lo que mencionas sobre las otras clases que pueden estar interfiriendo, pero, ya revisé y de hecho actualicé la pregunta con los estilos que están siendo usados por la tabla, pero no veo ahí algún elemento que evite el salto de línea o bueno, realmente no sé muy bien, mi fuerte no es CSS ni HTML.
    – Daniel
    Commented el 25 may. 2022 a las 0:38
1

Utilizar overflow-wrap: break-word; o también word-wrap: break-word; de ese modo se romperá la palabra al llegar al final de la línea.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.