Chrome Long URL in Table Issue

Question

So I've been banging my head against a wall trying to figure this issue out with Chrome and how it has a hard time wrapping long URLs in a table cell. I have seen a lot of questions regarding word wrapping and some even had with long URLs but none of them worked for me. So essentially, I tried putting in the td

word-wrap:break-word;

but this doesn't wrap the long URL which is (changed here, doesn't go to anything):

https://differentName/api/?REQUEST=%3C%3Fxml%20version%3D%271.0%27%20%3F%3E%3Cnta%3E%3Capi%20version%3D%271.0%27%3E%woot%20function%3D%22login%22%3E%3Clogin%3E%3C!%5BCDATA%5Bjpublic%something.com%5D%5D%3E%3C%2Flogin%3E%3Cpassword%3E%3C!%5BCDATA%5Bnta46550%5D%5D%3E%3C%2F

I've tried adding a width property onto the td but I get nothing. I was also told that when using the word-wrap property to also include:

table-layout:fixed;

But I don't want my columns fixed in width. Also, I don't have the wrapping issue if I use the fixed property. I'm working off of the latest version of Chrome (as of this date). No issues with FF 26.0 or IE 11. Any help would be great.

Answer 1

I would just establish a class on the td that you are having the issue with.

In its current state, you are only breaking when spaces are present.

If you want to force breaks without spaces in Chrome as well, you can use the CSS word-break: break-all;

Does something like this work for you?

• http://jsfiddle.net/qqsj8/2/

CSS:

td.break {
    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;
}

HTML:

<td class="break">Why do...</td>