angular/components · warning

A list item can have at maximum three lines.

Error message

A list item can have at maximum three lines.

What it means

Material list items support at most three visual rows (one title + two lines). `sanityCheckListItemContent` counts line content-children and warns in dev mode when there are more than two lines, or two lines plus unscoped text (which would render a fourth row).

Source

Thrown at src/material/list/list-base.ts:348

  const numTitles = item._titles!.length;
  const numLines = item._lines!.length;

  if (numTitles > 1) {
    console.warn('A list item cannot have multiple titles.');
  }
  if (numTitles === 0 && numLines > 0) {
    console.warn('A list item line can only be used if there is a list item title.');
  }
  if (
    numTitles === 0 &&
    item._hasUnscopedTextContent &&
    item._explicitLines !== null &&
    item._explicitLines > 1
  ) {
    console.warn('A list item cannot have wrapping content without a title.');
  }
  if (numLines > 2 || (numLines === 2 && item._hasUnscopedTextContent)) {
    console.warn('A list item can have at maximum three lines.');
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Reduce to one title plus at most two lines; move extra content to `matListItemMeta` or a tooltip.
2. Merge short lines into a single line element.
3. If more rows are genuinely needed, use a custom component or expandable rows instead of a list item.

Example fix

<!-- before -->
<mat-list-item>
  <span matListItemTitle>Title</span>
  <span matListItemLine>Line 1</span>
  <span matListItemLine>Line 2</span>
  <span matListItemLine>Line 3</span>
</mat-list-item>

<!-- after -->
<mat-list-item>
  <span matListItemTitle>Title</span>
  <span matListItemLine>Line 1 · Line 2</span>
  <span matListItemMeta mat-icon-button><mat-icon>info</mat-icon></span>
</mat-list-item>

const lines = item.querySelectorAll('[matListItemLine]').length;
const rawText = [...item.childNodes].some(n => n.nodeType === Node.TEXT_NODE && n.textContent.trim());
if (lines > 2 || (lines === 2 && rawText)) console.warn('List item exceeds three rows.');

When it happens

Trigger: A list item containing three or more `matListItemLine` elements, or exactly two lines plus additional unscoped text content, processed by `_updateItemLines`.

Common situations: Porting dense old `mat-list` items with many `matLine` spans; cramming metadata rows (subtitle, notes, status) into lines instead of truncating or restructuring.

Related errors

• A list item cannot have multiple titles.
• A list item line can only be used if there is a list item ti
• A list item cannot have wrapping content without a title.
• Unable to retrieve options for autocomplete. Autocomplete pa
• Unable to retrieve option groups for autocomplete. Autocompl

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/1f31907174e14579. Report an issue: GitHub.