"Hard" word breaking / splitting in html / css

Question

How can I split a long word/url at a certain point when displaying it in a html div?

It should be like:

thisisareallylongwordt 
hatneedstobebroken her
e or something like th
at.

Answer 1

You need to manually insert <br> tags:

thisisareallylongwordt<br>
hatneedstobebroken her<br>
e or something like  th<br>
at

There is afaik no CSS solution as much as one would want one.

Edit: As Raoul suggested the soft-hyphen ­ works too. Did not know that existed myself.

Answer 2

if you are wanting the word to break at the edge of the div rather than to overflow it use

div {word-wrap:break-word}

Answer 3

Do you want a static word wrap or something more dynamic as the size of the div changes? If you want the latter then you will probably want to use javascript. The jQuery library has a word-wrap plugin:

http://plugins.jquery.com/project/wordWrap

Dan