Word Wrap
The automatic process of breaking text onto the next line when it exceeds the width of the display area. Whether the break occurs mid-word or at word boundaries depends on the language and configuration.
Word wrap is the process of automatically moving text to the next line when it reaches the right edge of the display area. It is implemented in virtually every piece of software that displays text, including text editors, web browsers, email clients, and social media input fields. Without word wrap, long passages would extend beyond the visible area, forcing users to scroll horizontally just to read.
In English, word wrap is relatively straightforward. Spaces between words serve as natural break points, so the text can be split at any space without cutting a word in half. However, extremely long strings such as URLs or German compound words may not contain any spaces, requiring a forced break mid-word. The CSS property overflow-wrap: break-word handles this case by allowing the browser to break an otherwise unbreakable string.
Japanese word wrap is considerably more complex. Japanese text does not use spaces to separate words, so in principle a line break can occur after almost any character. However, line-breaking rules called kinsoku (prohibited characters) apply: a period or comma must not appear at the start of a line, and an opening bracket must not appear at the end of a line. The CSS line-break property controls how strictly these rules are enforced, with three levels: strict, normal, and loose.
CSS provides several properties for controlling line breaks. word-break determines whether words can be broken at arbitrary positions; setting it to break-all allows breaks anywhere. overflow-wrap (formerly word-wrap) only breaks a word if it cannot fit on a line using normal break points. Adding hyphens: auto inserts a hyphen at the break point when splitting a word, though this requires a language dictionary to work correctly.
The soft hyphen (U+00AD) is an invisible character used to control word wrap. When placed inside a long word, it tells the rendering engine that a hyphen may be inserted at that position if a line break is needed. If no break is needed, the soft hyphen remains completely invisible. For character counting, soft hyphens create a discrepancy between the visible character count and the internal character count, since they are present in the data but not displayed.
The number of characters per line directly affects readability. For Latin-script text, 45 to 75 characters per line (with 66 being the ideal) is considered optimal. For Japanese, 25 to 40 characters per line is recommended. In web design, max-width and the ch unit are used to control line length, working in tandem with word wrap to create a comfortable reading experience. CSS books on Amazon cover these techniques in detail.