How to Align Wrapped Bullet List Items with Their First Line?

Aligning Second Line of Bullet Item with First Line

When a bulleted list item spans multiple lines, it's often desirable to have the wrapped lines align with the first line, rather than appearing underneath the bullet.

Solution:

To achieve this alignment, divide the bullet into a separate div and wrap both the bullet and the text in a container div:

.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;
}

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

• The container-div provides additional padding to create a margin for the bullet.
• The bullet is positioned absolutely within container-div using position: absolute.
• The text is placed in the row2 div within container-div.

This approach ensures that the wrapped lines of the bulleted item are aligned with the first line, as desired.

The above is the detailed content of How to Align Wrapped Bullet List Items with Their First Line?. For more information, please follow other related articles on the PHP Chinese website!