CSS: Break a word without spaces in a table [duplicated]

Question

CSS: Break a word without spaces in a table [duplicated]

Navigation

#1 by (2 votes)
#2 by (2 votes)

-1

I have a word that does not contain blank spaces and I want to break it when it reaches the width of its <th> , I've been testing with different answers that I found in stack but I have not succeeded.

.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>

css

asked by Lluís Puig Ferrer 26.09.2017 в 12:18

source

2 answers

2

You can use overflow to hide the remaining text, but you will have to add a width to the container.

.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>

answered by 26.09.2017 в 12:28

Give TRUE value to the first record Getters and Setters in Java

score 2 · Accepted Answer

You were fine, but remember to size the containers. You're saying yes, let's go, but where?

.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>