How to Prevent Wrapped Bullet List Items from Indenting?

Indentation of Wrapped Bullet List Items

When a long list item wraps to a new line, it's common for the wrapped portion to appear indented underneath the bullet symbol. However, in certain scenarios, it may be desirable to have the wrapped text line up vertically with the first line.

To achieve this, consider using a two-level container structure. Wrap the bullet symbol in its own container and place it next to a container for the list item text. By nesting these containers within a parent container, you can control the positioning and alignment of the elements.

.container-div {
    padding-left: 20px;
}

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

.row2 {
    overflow: hidden;
    max-width: 500px;
}

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

With this approach, the wrapped text will appear on the left, aligned with the first line, while the bullet symbol remains in its original position. This technique provides precise control over the indentation and layout of your bullet lists.

The above is the detailed content of How to Prevent Wrapped Bullet List Items from Indenting?. For more information, please follow other related articles on the PHP Chinese website!