How to Align Wrapped Bullet Points with Their First Line in CSS?

How to Align Wrapped Bullet Item Lines with First Line

When creating bulleted lists, it's often desirable to have wrapped line items align with the first line. Instead of wrapping underneath the bullet, the wrapped portion should continue at the right of the bullet.

CSS and HTML Implementation:

To achieve this alignment, enclose the bullet in a separate div element and wrap both divs inside a container div.

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

With this approach, the bullet position remains absolute, while the bullet item text wraps to the right of the bullet.

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