Put line when breaking word

Question

How to put a "-" when the text is too small for a div box and should have a break line option.

div id="box"> TExttexttexttext </div>

#box { border:1px solid #000;
   width:50px;
   height:auto;
   word-wrap: break-word;
}

I want the the text go on another line to put "-".

http://stackoverflow.com/questions/16498154/add-hyphen-before-word-break — Jack, Dec 04 '13 at 17:27

score 0 · Answer 1 · answered Dec 04 '13 at 17:27

Check out the CSS property "hyphens"

#box { border:1px solid #000;
       width:50px;
       height:auto;
       word-wrap: break-word;
       hyphens:auto;
}

Note you'll have to use -webkit, -moz, etc prefixs for respective cross browser compatibility

1 Answers1