How CSS list-style-position inside Wraps Text

This article explains the CSS list-style-position: inside property, detailing how it alters marker placement within list items and directly affects the wrapping behavior of multi-line text compared to the default outside setting.

The list-style-position property in CSS determines whether a list marker (such as a bullet point or a number) appears inside or outside the principal block box of a list item (<li>). By default, browsers apply list-style-position: outside.

The Default Behavior: outside

When list-style-position is set to outside, the marker sits outside the content flow, placed in the margin or padding area of the list item. In this configuration, multi-line text naturally creates a hanging indent. When the text wraps to a second line, it aligns vertically with the start of the text on the first line, keeping the marker isolated to the left.

How inside Works

When you set list-style-position: inside, the marker moves directly into the content box of the list item. The browser treats the marker as the first inline element preceding the text.

ul {
  list-style-position: inside;
}

Text Wrapping Mechanics with inside

Because the marker becomes part of the inline formatting context, the wrapping behavior changes significantly:

1. No Hanging Indent: The first line of text begins immediately after the marker. When the text exceeds the width of the container and wraps to the next line, the wrapped text does not align with the first character of the text. Instead, it wraps completely under the bullet marker, aligning flush with the left boundary of the list item's content box.
2. Flow Continuity: The text behaves as a single continuous paragraph where the bullet is simply the first character in the line.
3. Spacing and Padding: Any padding or background color applied to the <li> element will enclose both the bullet marker and the text together, whereas outside leaves the marker outside the background area unless extra margin is handled by the parent container.

Practical Use Cases

Using list-style-position: inside is common in compact layouts, mobile interfaces, or card designs where horizontal space is limited and maintaining a wide indentation margin is undesirable. However, if readable list alignment with a distinct hanging indent is required, leaving the property as outside (or using custom flexbox or grid layouts) is the preferred choice.