CODEWITHSUNDEEP
csshtml
Jens Bergvall
Jens Bergvall

Reputation: 1627

CSS Word-wrap is cutting words in half

I have a div element set up

<div id="foo" class="bar"></div>

where bar 

bar{word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;display:inline-block;text-align:left;}

However several words are being cut in half at the end of the area.

I've tried setting the word-wrap property to normal, initial and inherit with no success.

Am i misunderstanding the functionality of word wrap?

Words are not wrapped?

EDIT

by using break-word i get this

enter image description here

EDIT This is the whole css for bar. 

.bar{BORDER:1px solid;height:<%=nHeight%>px;width:<%=nWidth/2%>px;max-width:<%=nWidth/2%>px; word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;background-color:#FFFFFF;cursor:default;display:inline-block;margin-top:6px;text-align:left;}

EDIT

Seems i run css 2.1

Upvotes: 0

Views: 12901

Answers (1)

Justus Romijn
Justus Romijn

Reputation: 16019

I believe you are mixing stuff up. If you want words not to break, only when a word is really long and does not fit on a line, you only have to use word-wrap: break-word.

HTML:

<div id="foo" class="bar"></div>

CSS: (relevant values only)

.bar {
    width: 100px;
    height: 200px;
    overflow-x: hidden;
    overflow-y: scroll;
    word-wrap: break-word;
}

Working fiddle: http://jsfiddle.net/c2JPz/2/

So what you should do is change:

overflow-x: no-scroll hidden

display: inline-block block (or remove this rule because this is default styling for a div)

Upvotes: 2

Related Questions