0

I'm trying to get a long URL placed in a sidebar to break and wrap within the confines of the table cells width. I have added style="word-break:break-all;" to the td and to a span surrounding the text and URL but still does not wrap. It just pushes the cell below where it should be.

Is there some other way to fix this?

FYI The code is for an HTML email and not the web which is why everything is inline.

Here it is live link

6
  • 1
    Try word-wrap:break-word;
    – Dan
    Sep 12, 2014 at 21:49
  • I have added that now but it still doesn't work. Sep 12, 2014 at 21:55
  • 1
    Well you should post your code and a fiddle if possible, not just a link.
    – Dan
    Sep 12, 2014 at 22:02
  • I looked at your "live link" and can't tell what's wrong, because you haven't described what is out of place. By looking, I'd guess it's the Contact block, with the email address (not a URL) that is not breaking.
    – Stephen P
    Sep 12, 2014 at 22:02
  • Hi Stephen P. Yes I was referring to the email address in the contact block. I guess I called it a URL since it's still an <a href=""></a> Sep 13, 2014 at 8:23

2 Answers 2

2

Your problem is with tables: they are not the most cooperative in styling with CSS.

Currently your TD must be set to display: block for the break-word solution to work. You will want to set a width as well so it doesn't effect your design too bad. You can also assign this to your span:

display: block;
width: 100px;

There are a few other alternatives as well, which I posted in the following:

jsFiddle

1
  • Thanks jhawes. I got super excited seeing this work on my ipad and in Chrome but then of course IE was the downer IE 9 and 8 to be specific. But this def. helped me find the answer with some additional cross browser support I found on CSS-tricks here css-tricks.com/snippets/css/… Sep 13, 2014 at 8:53
0

I have set up a JSFiddle here to display the fix in action jsfiddle

jhawes was correct in pointing out that my td needed a width specified. I did this as such (everything needed to be inline as this is for an email)

<td width="160" style="width:160px;-word-break:break-word;word-break:break:all;"></td>

I also needed to add display:block; as suggested (I didn't need the extra containing div element)

<td width="160" style="width:160px;display:block;-word-break:break-word;word-break:break:all;" </td>

This works great among most modern browsers but still wasn't working in IE9 and IE8. I found a cross broswer fix on CSS-tricks here

So the final working td looks like this

<td width="160" style="width:160px;display:block;-ms-word-break: break-all;

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

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
-moz-hyphens: auto;
 hyphens: auto;""</td>    

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.