-1

Tengo una palabra que no contiene espacios en blanco y quiero romperla cuando alcance la anchura que tiene su <th>, he ido probando con diferentes respuestas que he encontrado en stack pero no lo he conseguido.

.romperpalabra{
display:inline-block;
word-wrap:break-word;
}
<table>
<thead>
<tr>
  <th class="column1">COLUMN1</th>
  <th class="column2">COLUMN2</th>
  <th class="column3">COLUMN3</th>
</tr>
</thead>
<tbody>
<tr>
  <td>hola1</td>
  <td class="romperpalabra">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2</td>
  <td>hola3</td>
</tr>
</tbody>
</table>

0

2 respuestas 2

2

Ibas bien, pero recuerda ponerle tamaños a los contenedores. Le estas diciendo que si, que parta, ¿pero donde?

.romperpalabra{
  word-wrap: break-word
}
td {
  border: 1px solid;
}
table{
  table-layout: fixed; 
  width: 100%
}
<table>
<thead>
<tr>
  <th class="column1">COLUMN1</th>
  <th class="column2">COLUMN2</th>
  <th class="column3">COLUMN3</th>
</tr>
</thead>
<tbody>
<tr>
  <td>hola1</td>
  <td class="romperpalabra">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2</td>
  <td>hola3</td>
</tr>
</tbody>
</table>

2

Puedes utilizar overflow para esconder el texto restante, pero vas a tener que añadirle un width al contenedor.

.romperpalabra{
  width: 100px;
  display:inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}
<table>
<thead>
<tr>
  <th class="column1">COLUMN1</th>
  <th class="column2">COLUMN2</th>
  <th class="column3">COLUMN3</th>
</tr>
</thead>
<tbody>
<tr>
  <td>hola1</td>
  <td class="romperpalabra">holaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa2</td>
  <td>hola3</td>
</tr>
</tbody>
</table>

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