javascript - What characters will a TextArea wrap at, other than spaces? - Stack Overflow

I'm working on the latest version of my plugin, Textarea Line Counter (/?p=84). To make it even more accurate, I want to identify regions of text that wrap because they are too large to fit on the line (like a sequence of repeated characters).

I'm assuming that browsers only wrap text at spaces. Are there any other characters that lines can be wrapped at? Thank you,

I'm working on the latest version of my plugin, Textarea Line Counter (http://mostthingsweb./?p=84). To make it even more accurate, I want to identify regions of text that wrap because they are too large to fit on the line (like a sequence of repeated characters).

I'm assuming that browsers only wrap text at spaces. Are there any other characters that lines can be wrapped at? Thank you,

• javascript
• html
• css
• textarea

Share Improve this question Follow asked Feb 16, 2011 at 1:58 Chris LaplanteChris Laplante 29.7k1818 gold badges109109 silver badges137137 bronze badges 1

• 1 There's definitely at least two more characters: the hyphen - and the em dash —. – thirtydot Commented Feb 16, 2011 at 2:08

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Looks like it depends on the browser, my Opera wraps also on e.g. + % ? $ / ( [ { } \ ° ! ¿
Safari/Chrome on ¿ ? too

(guess there are lots more)

Nice idea for a plugin. Fighting the accuracy issues is going to be a challenge.

There's not a universal catch all for the way textarea is going to handle a string (other than line breaks at spaces), or using word-wrap.

IE produced a break with . , () {} ?, but not with / * = +

In this example, textarea seems to have that "special" feeling like a td

Based on all your advice, I have created a solution. It is rather large, and in fact I think I will make it into a separate plugin, as well as including it in my Textarea Line Counter. It works like this:

1. Create a div to act as a container, and set the font to something monospaced (i.e. every character is the same width)
2. Create a span within the container, and place a single letter.
3. Take the width measurement of the span (which will be the width of the letter, once margins, padding, and some other CSS attributes are cloned)
4. Create another div within the container and clone its CSS attributes. Set it's width to be two times the width of the letter found in step 3, and record its height.
5. To test if a character will cause a wrap, set the text of the div to: A[some character]A. [some character] is a character you are trying to test.
6. Test the height of the div. If it is larger than the height found in step 4, the text has wrapped.

I'm looking forward to releasing this plugin. Thank you again for all your advice.

some browsers will break inside words if the word is longer than the col width, otherwise they break on spaces.

I notice some browsers set this by default- you can, too in most bowsers with:

textarea{word-wrap: break-word}

you can be sure it is not set by using textarea{word-wrap: normal}