Doubts regarding a large string bursting the table td tag

Question

I’m retrieving some data from the Mysql databank and it’s bringing everything right. However, one of the fields is a URL that when is passed to a tag <td> of the table it passes right is not respecting the maximum width of 40px, see in the example below. It passes through and continues in the token column (Obs: the token is empty).

I wanted to know if you can show the whole string without changing the field size and without giving a Hidden orverflow in CSS.

Answer 1

Amanda, add the CSS attribute

overflow-wrap: break-word;

in this specific field, look at an example of how it works below:

div {
width:50px;
border:1px solid red;
}
a {
overflow-wrap: break-word;
}

<div>
<a href="https://www.ecowebdesign.com.br">https://www.ecowebdesign.com.br</a>
</div>

If you want the official documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

Good luck

Answer 2

Use the property word-break: break-all;. It will break long texts that can exceed the width of the element where it is, see:

td{
   word-break: break-all;
}

<table border="1">
   <tr>
      <td style="max-width: 100px;">
         /questions/397944/duvidas-com-rela%c3%a7%c3%a3o-h%c3%a1-uma-string-grande-estourando-a-tag-td-da-table
      </td>
   </tr>
</table>

See how it looks without the property:

td{
   /*word-break: break-all;*/
}

<table border="1">
   <tr>
      <td style="max-width: 100px;">
         /questions/397944/duvidas-com-rela%c3%a7%c3%a3o-h%c3%a1-uma-string-grande-estourando-a-tag-td-da-table
      </td>
   </tr>
</table>