2

I'd like to set my text area to wrap in the middle of a word when the text hits the edge of the area. For example:

Normal text area behavior:
word word word
longword

Behavior I want:
word word word lo
ngword

It seems so simple but I've searched around and I can't find any solutions, surely there's an attribute, or CSS property, for this, right?

Liyara
  • 21
  • 3
  • 1
    Why? This sounds like poor usability: it confuses the user. If you are actually using `textarea` for display of data, you are probably solving the wrong problem. – Jukka K. Korpela Jun 06 '14 at 12:30
  • Can be useful when your textarea is not representing words but series of different kind of characters (containing numbers, letters, spaces, hyphens and others at witch default world wrap would cut lines) in an editable form. When the letters are not composing a word, there is no reason to break at the end of the letters series. – NatNgs Jan 30 '18 at 14:05

2 Answers2

3

You may try the word-wrap (overflow-wrap) and/or word-break CSS property:

textarea
{
    word-wrap:break-word;
    word-break:break-all;
}

JSFiddle demo

Passerby
  • 9,715
  • 2
  • 33
  • 50
0

A quick google, and found this: How to word wrap text in HTML?.

Had a go at it myself here: JSFiddle

I used this code.

<div style="width:50px; word-wrap:break-word">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
Community
  • 1
  • 1
MaxForce
  • 21
  • 1
  • 6