CODEWITHSUNDEEP
csshtmlline-breaks
tzmatt7447
tzmatt7447

Reputation: 2399

"Hard" word breaking / splitting in html / css

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.

Upvotes: 4

Views: 1654

Answers (3)

Dan Kendall
Dan Kendall

Reputation: 703

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

Upvotes: 0

Stuart Burrows
Stuart Burrows

Reputation: 10814

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}

Upvotes: 5

FK82
FK82

Reputation: 5075

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 &shy; works too. Did not know that existed myself.

Upvotes: 0

Related Questions