Editing the Wrap Behavior on Line Breaks

You can apply line breaks and then determine the wrap behavior on line breaks using styles.

The line break tag in XHTML is <br/>. Line breaks end the current line and the text or image after it will be moved to the very next line, in a way similar to pressing the Return key in a word processor.

However, there is a difference. Pressing the Return key will start a new paragraph with a <p> tag. Using the line break tag will start a new line without creating a new paragraph tag.

You might want to use line breaks for adjusting particular areas of a topic or for placing text immediately below images. You can use the line break tag inside many other XHTML elements such as tables, lists and headings.

Line breaks are best used for solving minor formatting issues on individual cases. Large formatting issues across many topics are best handled by using styles. See Styles and Stylesheets.

How to Insert Line Breaks

  1. Open a topic.
  2. At the bottom of the XML Editor, click the Text Editor tab to see the markup. You can also use split the editor between the XML Editor and the Internal Text Editor. See Internal Text Editor.
  3. With the topic open in the Internal Text Editor, identify the location in the code where you want the line break to be. This will usually be in a paragraph element. Then type the following.

    <br/>

    This is the line break tag.

  4. Click Save the active file. to save your work.

How to Use a Style to Determine Wrap Behavior on Line Breaks

Wrap behavior on line breaks determines how and when the line ends and begins (or "wraps") on <br/> tags from one line to the next. It also determines how white space is treated when the line wraps. Wrap behavior is controlled by the white-space property.

  1. From the Content Explorer, open the stylesheet that you want to modify.
  2. Complete one of the following sets of steps, depending on whether you want to use the Simplified view or Advanced view in the Stylesheet Editor.

    • Simplified The Simplified view displays styles in a grid view and is often best for brand new users.

      This view provides an easy way to apply properties to styles, with format options available from a toolbar and dialogs (similar to the way one would use an interface such as Microsoft Word). In some cases, only the most common property options are available in the Simplified view (e.g., font, letter/word spacing, paragraph alignment/indentation, autonumbering format, borders, background). One advantage of the Simplified view is that you can apply a property to multiple styles at the same time. You can also click a check box to hide the properties in the editor, allowing you to see only the styles.

    • Advanced The Advanced view displays styles in a tree structure, and despite the name, is user friendly for authors of all levels.

      For the properties, you can toggle between a grouped display and an alphabetical display. The Advanced view of the Stylesheet Editor lets you edit more settings than are available in the Simplified view. In addition, the Advanced view lets you see and apply settings to multiple mediums and media queries at the same time.

    Warning Mediums can be used if you want to use one group of settings for online output types and another group of settings for print-based output types. For example, you might use the default medium for your online outputs and the print medium for your print outputs.  From the Medium drop-down in the Stylesheet Editor, make sure the proper medium is selected before you begin. In the Advanced view, you can open multiple mediums at once; you just need to look at the title at the top of the medium pane and make sure you are working in the correct one. If you are not using stylesheet mediums for your different outputs or if you want all mediums to have the same settings, just leave the medium set to default and continue. Please note that Flare remembers the last medium that you used when working in the stylesheet, so it may or may not be the one that you want to use the next time around. See Mediums and Media Queries.

    If Using Simplified View

    1. In the local toolbar, make sure the first button displays Simplified View button (which means that the Simplified view is currently shown in the editor). If the button displays Advanced View button instead, then click it.
    2. In the upper-left corner of the Stylesheet Editor, click in the drop-down field and select The paragraph style category selected in the types of styles drop-down list..
    3. Select the appropriate paragraph style. For example, you can select the parent p tag, or you can select a class that you may have created for that tag (e.g., p.Tip, p.Note).
    4. In the upper-left corner of the editor, click the Hide Properties check box so that it is unchecked. The properties for each style will appear.
    5. Scroll horizontally until you reach the white-space property column.
    6. Click the cell where it intersects with the white-space property column and press F2 to edit the cell.
    7. In the cell, enter one of the following.

      • default Sets the property to the default value, which is "normal." See below.
      • inherit The value for line breaks will be inherited from the parent element.
      • normal Any sequences of white-space will be converted to a single white-space. The text will wrap on line breaks when necessary.
      • nowrap Any sequences of white-space will be converted to a single white-space. The text will never wrap to the next line and will continue on the same line until a <br/> tag appears.
      • pre The white-space will be preserved by the browser. The text will only wrap on line breaks.
      • pre-line Any sequences of white-space will be converted to a single white-space. The text will wrap on line breaks when necessary.
      • pre-wrap The white-space will be preserved by the browser. The text will wrap on line breaks when necessary.
    8. Press ENTER.

    If Using Advanced View

    1. In the local toolbar, make sure the first button displays Advanced View button. If the button displays Simplified View button instead, then click it.
    2. In the upper-left corner of the Stylesheet Editor, click in the drop-down field and select The paragraph style category selected in the types of styles drop-down list..
    3. Select the appropriate paragraph style. For example, you can select the parent p tag, or you can select a class that you may have created for that tag (e.g., p.Tip, p.Note).
    4. From the Show drop-down list on the upper-right side of the editor, select Show drop-down set to display all properties in styles..
    5. (Optional) You can use the toggle button in the local toolbar to show properties below in a group view Stylesheet local toolbar button to show properties in a group view. or an alphabetical view Stylesheet local toolbar button to show properties in an alphabetical view..
    6. If you are using the group view, expand the Block group.
    7. To the right of white-space, click Display more options., and select one of the following:

      • default Sets the property to the default value, which is "normal." See below.
      • inherit The value for line breaks will be inherited from the parent element.
      • normal Any sequences of white-space will be converted to a single white-space. The text will wrap on line breaks when necessary.
      • nowrap Any sequences of white-space will be converted to a single white-space. The text will never wrap to the next line and will continue on the same line until a <br/> tag appears.
      • pre The white-space will be preserved by the browser. The text will only wrap on line breaks.
      • pre-line Any sequences of white-space will be converted to a single white-space. The text will wrap on line breaks when necessary.
      • pre-wrap The white-space will be preserved by the browser. The text will wrap on line breaks when necessary.

  3. Click Save the active file. to save your work.

Example

Example Below are two lines that were created by pressing Return. Notice that they are contained in separate paragraph <p> tags.

Here is what these lines look like when viewing the XHTML code in the Internal Text Editor.

If you insert the line break tag into the XHTML code, it might look like this.

Here is how that code will appear in the XML Editor. Notice that the first two lines are in the same paragraph, even though they are on separate lines.

What’s Noteworthy?

Note You can also insert non-breaking spaces. See Inserting Characters and Symbols and XML Editor.

Note For more information about CSS styles, properties, and settings, visit the World Wide Web Consortium at www.w3.org.