Search code examples
cssline-breaks

CSS line break on very long words but not on spaces

Let say I have this paragraph

iamaverylongwordthathasnospace yehey

when i use word-wrap:break-word; it became

iamaverylongwordthathas
nospace yehey

This is good..but when I tried

iama verylongwordthathasaspace yehey

It became

iama
verylongwordthathasaspace
yehey

My question is how to make the paragraph look like this

iama verylongwordthathas
nospace yehey

It will wrap on spaces but force to break on long words?

Solution

  • You are looking for word-break: break-all;

    Here is an example. I put the background as black, so you can see where it breaks: JS Fiddle

    HTML

    <div>iama verylongwordthathasaspace yehey</div>

    CSS

    div {
    width: 120px;
    word-break: break-all;
    background: black;
    color: white;  
}

    Source: CSS-Tricks: Word-break