How Can I Achieve Properly Indented Line Breaks in Bulleted Lists?

Achieving Indented Line Breaks in Bulleted Lists

When dealing with lengthy bulleted list items that wrap to a new line, it's desirable for the continuation to align horizontally with the first line. By default, wrapped text appears underneath the bullet, creating an unaligned appearance.

To resolve this issue, we can employ an approach utilizing additional divs.

Solution

1. Wrap the Bullet in a Div:
   Enclose the bullet in a separate
   element, providing absolute positioning and adjusting its margin to match the bullet's appearance.
2. Wrap Both Divs in a Container Div:
   Create a container
   to hold both the bullet and the list item text

   elements. Apply necessary styling to control padding and overflow.
3. Align the List Item Text:
   Within the container, ensure that the text
   has appropriate padding to align it horizontally with the bullet.

Code Example

.row2 {
    padding-left: 20px;
    overflow: hidden;
    max-width: 500px; 
}
.red-square-5 {
    position:absolute;
    width:5px;
    height:5px;
    margin-top: 0.5em;
    background:#f00; 
}

<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>

By following this approach, the wrapped line in the bulleted list will indent to the right of the bullet, aligning with the first line and improving the readability and aesthetics of your list.

The above is the detailed content of How Can I Achieve Properly Indented Line Breaks in Bulleted Lists?. For more information, please follow other related articles on the PHP Chinese website!