Hello,
I have a div which has width of say 200px. It does not show horizontal scroll bar. Now if anyone types any word more than 200px worth, it is simply hidden. I am wondering if its possible to automatically put a newline tag after every word reaches 200px length?
Thank you for your time.
You can achive this using simple CSS using
WORD-BREAK: break-ALL.
<div style="width: 200px; word-break: break-all">Content goes here</div>
Hope this is what you were looking for...
It's a tricky problem, but you should probably read http://www.quirksmode.org/oddsandends/wbr.html.
basically, there is somewhat inconsistent support and the linked article proposes use of:
wbr:after { content: "\00200B" }
in your css, and using the <wbr/> tag in your html
If you have mono-spaced font, it'd be easy to count number of characters, and just insert a break-tag. But it's harder to calculate where to put in the break-tag with normal fonts.
For IE, you can set word-break: break-all; which will break words when they reach a certain length...
There is a soft-hyphen that lets you define where a word can be broken up (For example, prod-uct-iv-ity) which doesn't display any hyphens, just defines where they could show up if the word has to wrap lines. It is entity ­
word-break is good, but it is said not to work in firefox. (haven't tested.)
For firefox, use javascript.
It does work in webkit though.