1

When i have long url link, it breaks and overflow the parent container.

<a href="">http://www.example.com/somg-looooooooooooooooooooooooooooooooooong-url</a>

To fix this, i tried to use either one of the following in CSS. Both of them works.

word-wrap

a {
   word-wrap: break-word;
}

word-break

a {
   word-break: break-all
}

What is the difference between word-wrap and word-break? which one is better than other?

Fizer Khan
  • 88,237
  • 28
  • 143
  • 153

2 Answers2

1

There is difference: word-wrap moves the whole word to another line, word-break just move what does not fit in previous line: http://goo.gl/6yt7zJ In your example, the result will be the same, because there is not space to move the whole word, but they both work different.

jtorrescr
  • 627
  • 4
  • 13
0

There is no difference that you would likely notice, however word-wrap is the standard more commonly used one, and for a fun fact word-break exists as an alternative only to handle the word breaking of asian (Chinese, Japanese etc.) characters

WongKongPhooey
  • 398
  • 1
  • 5
  • 20
  • Hello WongKongPhooey, just to clarify there is difference between them. Check my added answer http://goo.gl/6yt7zJ – jtorrescr Jul 04 '14 at 14:53