This page explains how to control the text wrapping in HTML/CSS.
CSS 2 provides several ways to control text wrapping. The CSS property is
white-space. How the line wraps depends on its value.
This is the normal behavior of the paragraph element
Note that white spaces are any of space, tab, and newline characters. You can always use
<br> element to force a line break.
white-space: pre, the behavior is the same as the
pre is best used for showing computer program code, or poetry of short lines.
<p style="white-space:pre-wrap; width:60ex">…</p>
white-space:pre-wrap, it's like mix of
This is very useful for computer code, even better than
pre, because if you have a long line comment, it'll be wrapped in the display, but when user copies the code, there will not be extra newline. For example:
# python # Here is a very long comment. long01 long02 long03 long04 long05 long06 long07 long08 long09 long10 long11 long12 long13 long14 long15 long16 long17 print 5
This is just like
pre-wrap, except that repeated spaces are shrinked into just one space.
<p style="white-space:nowrap; width:60ex">…</p>
A common way to control wrap for paragraphs is simply to use the “width”. Like this:
That will limit the width to 30 “em” unit. (“em” is font size.) 〔➤ CSS: Understanding CSS Units〕
You can always force a line break by using
To prevent a line wrap at positions you do not want to happen, use the Unicode character named NO-BREAK SPACE. Its decimal value is 160, hex is A0. The HTML entity is
〔➤ HTML/XML Entities List〕