1

¿Como puedo hacer para que la celda de una tabla html ocupe el largo de un texto y no se corte en pedazos ?

introducir la descripción de la imagen aquí

2
  • 3
    Puedes usar en los estilos de la tabla white-space: pre-wrap o white-space:nowrap Commented el 29 jul. 2016 a las 16:16
  • ¿Que esperas que suceda si la celada no puede expandirse mas y el texto no cabe? La pregunta viene pues la tabla se expandira hasta que otra regla la detenga. Si en ese caso aun no entra el texto, ... ¿que quieres que pase? Commented el 29 jul. 2016 a las 18:03

2 respuestas 2

4

Usa una combinación de overflow: hidden, white-space:nowrap; y por último text-overflow: ellipsis para indicar continuación de texto.

Debes especificar un ancho de columna con max-width para que la tabla no se estire a todo lo largo.

td {
  max-width: 250px;
  font-size: 40px;
  border: solid 2px gray;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<table>
  <tr>
    <td>
      Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
    </td>
    <td>
      Lorem ipsum dolor amet. Lorem ipsum dolor amet. Lorem ipsum dolor amet.
    </td>
  </tr>
</table>

2

Puedes usar white-space: pre-line o white-space:pre-wrap así:

<table class="espacios">
   <tr>
      <td>FOLIO METPAB-19215</td>
      <td>FOLIO METPAB-19215</td>
   </tr>
</table>

y en el css:

.espacios{
  white-space: pre-wrap;
}

o

.espacios{
  white-space: pre-line;
}

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.