Controlling White Space within Text - HTML

White space is typically not a concern in HTML documents. However, at times you’ll want better control over how white space is interpreted and how certain elements line up to their siblings.

Clearing floating objects
The float property can cause elements to ignore the normal flow of the document and “float” against a particular margin. For example, consider the following code and resulting output shown:

Floating images can add a dynamic feel to your documents.

Floating images can add a dynamic feel to your documents.

Although floating images can add an attractive, dynamic air to your documents, their placement is not always predictable. As such, it’s helpful to be able to tell certain elements not to allow floating elements next to them. One good example of when you would want to disallow floating elements is next to headings. For example, consider the document shown.

Using the clear property you can ensure that one side or both sides of an element remain free of floating elements. For example, adding the following style to the document ensures that both sides of all heading levels are clear of floating elements—this results in the display shown.

h1,h2,h3,h4,h5,h6 { clear: both; }

You can specify left, right, both, or none (the default) for values of the clear property. Note that the clear property doesn’t affect the floating element. Instead, it forces the element containing the clear property to avoid the floating element(s).

The white-space property
User agents typically ignore extraneous white space in documents. However, at times you want the white space to be interpreted literally, without having to result to using a <pre> tag to do so. Enter the white-space property.

Floating images can sometimes get in the way of other elements, as in the case of this heading.

Floating images can sometimes get in the way of other elements, as in the case of this heading.

Using the clear property forces an element to start past the floating element’s bounding box (and before any additional floating elements begin).

Using the clear property forces an element to start past the floating element’s bounding box (and before any additional floating elements begin).

The white-space property can be set to the following values:

  • normal
  • pre
  • nowrap

The default setting is normal, that is, ignore extraneous white space. If the property is set to pre, text will be rendered as though it were enclosed in a <pre> tag. Note that using pre does not affect the font or other formatting of the element—it only causes white space to be rendered verbatim. For example, the following text will be spaced exactly as shown in the following code:

<p style=“white-space: pre;”>This paragraph’s words are irregularly spaced, but will be rendered as such by the user agent.</p>

Setting the white-space property to nowrap causes the element not to wrap at the right margin of the user agent. Instead, it continues to the right until the next explicit line break. User agents should add horizontal scroll bars to enable the user to fully view the content.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

HTML Topics