How to Properly Indent Wrapped Text in Bulleted Lists?

How to Indent the Second Line of a Wrapped Bulleted List Item

When working with bulleted lists, sometimes a list item can be so long that it wraps to the next line. By default, the wrapped portion will align with the start of the line, creating an untidy appearance. To address this, we want the wrapped portion to line up with the first line of the bullet item.

In this question, the user faces the same issue. Their current code, provided in the "Problem Content" section, does not achieve the desired indentation. The proposed solution is to break the bullet item into two separate divs: one for the bullet and one for the text. These divs are then wrapped in a container div.

Here's an improved code snippet using the suggested approach:

CSS

.container-div {
  padding-left: 20px;
  overflow: hidden;
  max-width: 500px;
}

.red-square-5 {
  position: absolute;
  width: 5px;
  height: 5px;
  margin-top: 0.5em;
  background: #f00;
}

HTML

<div class="container-div">
  <div class="red-square-5"></div>
  <div class="row2">
    Long long long long long long long long long long long long long long long long long long long long long long long long long title
  </div>
</div>

In this updated code, the red square representing the bullet is positioned absolutely and aligned vertically with the first line of text. The long text then flows naturally, aligning with the left edge of the container div. This approach successfully achieves the desired indentation for the wrapped portion of the bullet item.

The above is the detailed content of How to Properly Indent Wrapped Text in Bulleted Lists?. For more information, please follow other related articles on the PHP Chinese website!