To give wrapped entries separated by <br> tags a hanging indent, apply text-indent: 2em hanging each-line to their block container. Check support for both keywords; when older browsers matter, give each entry its own block and use padding with a negative indent.

This guide is for someone editing a small HTML page on a Mac who wants every entry to start flush with the left edge while its continuation lines sit farther inward. The examples use synthetic text and require only a plain-text or code editor and a browser.

Why a normal hanging indent fails after a break tag

There are two different line endings to account for. A <br> creates an explicit line break. A soft wrap happens when the browser fits text into the available width. Your intended layout treats the first as the start of another entry and the second as a continuation. WHATWG defines <br> as a line break; it does not create a new paragraph or entry container. HTML Standard: The br element.

A plain negative text-indent affects the first formatted line of a block. Adding padding can therefore create a hanging indent for that block, but it does not restart the outdent after every <br>. The subsequent entries still belong to the same block. MDN: text-indent.

The CSS specification defines the combination needed here: each-line includes the first line and lines immediately following forced breaks; hanging reverses that selection. Together, they indent the soft-wrapped continuation lines while leaving each explicitly started line flush. W3C: First Line Indentation.

The target looks like this. The line endings below are illustrative; the browser will choose actual wrapping points from the available width and font metrics.

Entry A begins at the outer edge and continues
    inward when the available width runs out.
Entry B also begins at the outer edge and has
    its own indented continuation.
Entry C is short.

Choose a method before changing the page

Use the existing markup and browser requirements to choose your approach. This decision table follows from the documented indentation behavior and the browser support data; it is an implementation aid rather than a separate browser feature.

Your situation Recommended approach
Explicit line breaks are part of one text passage, and supported browsers are sufficient Keep the breaks and use hanging each-line
Entries are separate paragraphs or list items Give each entry appropriate structural markup
Older browsers must show the hanging indent Use one block per entry with padding and a negative indent
You can edit only CSS and an older browser lacks the keywords Keep a readable flush layout, or request a markup change

Do not infer keyword support from support for basic text-indent. MDN’s current compatibility data lists both hanging and each-line from Safari 15, Firefox 121, and Chrome 146. Older installations can support ordinary indentation while rejecting this combination. MDN browser compatibility data: text-indent.

Also check whether the breaks express the right structure. WHATWG reserves <br> for breaks that belong to the content and says it must not separate thematic groups within a paragraph. Separate paragraphs belong in paragraph elements; a collection of list items should use list markup. HTML Standard: The br element, HTML Standard: Grouping content.

Keep the break tags with the native CSS solution

The following complete HTML document demonstrates the break-preserving method. On your Mac, paste it into a plain-text or code editor, save it as hanging-indent.html, and open that file in a browser. Use an HTML file rather than a rich-text document.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

The @supports condition checks the complete declaration before applying it. Browsers that do not support the combination retain the explicitly defined flush layout. Feature queries conditionally apply CSS according to browser support. MDN: @supports.

Apply the indentation to .entries, the block containing the text. The relevant property applies to block containers; putting the declaration on the <br> does not provide a container for the following entry. MDN: text-indent.

The 2em value is an adjustable design choice. Try a smaller or larger value after checking the narrow layout. It creates a consistent continuation offset; it does not measure the width of Entry A: or align text automatically beneath the first word after a variable-length label.

Use separate blocks when every browser needs the indent

If each entry is an independent paragraph, change the markup so every entry has its own first line. The following complete alternative removes the separating breaks and applies the traditional hanging-indent calculation separately to each paragraph.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

The padding moves the paragraph’s content start inward by 2em. The negative indent moves only its first line back by the same amount. Wrapped lines retain the padded starting position. Equal values are essential: changing only one changes where the first line begins. Negative indentation is documented by MDN, while padding-inline-start supplies padding at the logical starting edge. MDN: text-indent, MDN: padding-inline-start.

For an illustrative font size of 16 pixels, an offset of 2em corresponds to 32 pixels: the continuation begins 32 pixels inward, and the first-line adjustment is −32 pixels. This is a calculation for the example, not a measured rendering result.

Remove the old separators when adopting this structure. Keep each complete entry and its existing inline formatting inside its new paragraph. If the content is a list, use list items instead; the paragraph example is appropriate specifically for independent paragraphs. HTML Standard: Grouping content.

Check wrapping and text flow before finishing

Test the page at a width where both long entries wrap. Then widen the window until they fit on single lines. Use the following checks to distinguish an indentation problem from a wrapping or structure problem.

  1. Check every entry start. In the break-preserving example, the text after each <br> should return to the outer edge. If it does not, check support for the full keyword combination.
  2. Check every continuation. Long entries should wrap inward. Short entries should remain flush without extra leading space.
  3. Check the narrowest intended column. Reduce the indentation if it consumes too much of the available line width.
  4. Check the actual content. Preserve each entry’s words, inline emphasis, and intended explicit breaks when moving it into a separate block.

If nothing wraps, inspect white-space. The example uses normal, which collapses source whitespace and allows wrapping. pre preserves whitespace but prevents ordinary soft wrapping; pre-wrap preserves whitespace while allowing it. Indentation cannot become visible on a continuation line that never forms. MDN: white-space.

Avoid adding spaces to simulate the indent. Under white-space: normal, runs of spaces collapse. Avoid inserting extra break tags at the current window’s wrap points, too: those would turn browser-chosen continuations into explicit starts, changing how each-line treats them. MDN: white-space, W3C: First Line Indentation.

Keep the browser responsible for line breaking and glyph shaping. Do not split an entry into character wrappers to calculate its visible lines. W3C documents conditions where inline boundaries interrupt shaping, including nonzero inline padding, borders, or margins between characters. For this task, wrapping whole entries at their intended boundaries avoids introducing those extra boundaries within words. W3C: Shaping Across Element Boundaries.

Finish with the structure that matches your content: retain meaningful explicit breaks with hanging each-line, or give independent entries their own blocks. Confirm that every entry starts flush and that only its naturally wrapped continuations move inward at the widths you intend to use.

Sources