This page explains how to control the text wrapping in HTML/CSS.
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〕