Making Long Words Wrap or Break in HTML with CSS

When long lines push tables too wide here’s how to fix it — and a gotcha

Not sure how this works in every browser but for my purposes I am generating and publishing a report to PDF so I only need to make this work in Google Chrome.

This same problem has thrown me for a loop over and over again and I swear I wrote about it it here before but now I can’t find it. Here’s the thing. I finally realized I was doing things correctly but I think there’s a bug in Google Chrome.

In my case I’m printing out very long URLS or values in HTML Requests and Responses that push a table too wide. I have fixed this so many times and I always forget the right combination to make it work.

And I just realized I have probably been doing it right all this time while I’m banging my head against a wall.

Here’s what you need to do.

Create a css class with the following properties, defining your table row width and then adding the properties that cause the lines to wrap if they go past your width:

.text{width:600px;display:inline-block;word-wrap:break-word;}

Then assign that class to the table data where the text is pushing your table too wide:

<table>
  <tr>
    <td class="text">
      Thisismysupercalifragilisticexpialidociouslylongtextthathasnolinebreakinitsoitgoespasttheendofthetablewidth.
    </td>…