Css 无序列表换行问题

我有这样一个无序列表：

HTML

• Lorem ipsum dolor-sit Lorem ipsum dolor-sit
• 同侧阴唇
• 同侧阴唇
• 同侧阴唇

CSS

.custom-list {
width: 250px;
}
.custom-list ul {
margin-top: 25px;
padding: 0 27px;
}
.custom-list li {
list-style: none;
font-size: 0.875rem;
color: #959595;
text-align: left;
}
.custom-list li:before {
content: "•";
color: #cc2a41;
padding-right: 8px;
}

如果你注意到第一个li，当行号断开并在红色的项目符号下面时，文本不会缩进。如何解决这一问题以使文本作为块对齐？ 谢谢

---

请参见演示：

检查下面的代码，这将对您有所帮助

<p>
    Lorem ipsum dolor sit amet fugit error quae unde omnis aut aut, eos ut ratione omnis laudantium ab sit architecto nemo perspiciatis quasi doloremque voluptatem sunt ipsam ratione aperiam aperiam, aperiam error beatae voluptas aut doloremque eaque sit ut inventore ut omnis omnis, 
</p>

<ol>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        nemo ab ratione sunt sit rem magni sit fugit unde unde, inventore magni magni ab qui eos ab natus sunt nemo ab fugit
    </li>
    <li>
            omnis error rem enim ipsam ipsam, perspiciatis qui eos inventore laudantium vitae quasi voluptas eaque aut error vitae voluptatem consequuntur aspernatur consequuntur inventore fugit qui ipsa ipsa, quia 
    </li>
    <li>
        ipsa ipsam ipsam illo explicabo sit vitae vitae, qui doloremque quae aspernatur aperiam beatae ratione ut aperiam sed dicta qui ipsam ipsa voluptatem voluptatem, error ratione aut rem ipsa 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
    <li>
        omnis ab quasi voluptatem voluptatem consequuntur sed fugit beatae veritatis sed quae dolores iste quasi ipsam ipsam, perspiciatis sed inventore eaque totam inventore sed ut sit dolores perspiciatis inventore ipsa totam ipsam ipsam, 
    </li>
    <li>
        et consequuntur error totam quia ipsa odit aspernatur accusantium vitae ipsam ipsam, enim voluptatem eaque ratione vitae ipsam qui odit ratione enim ipsa ipsa natus quae laudantium quae rem 
    </li>
</ol>

-应该让你知道如何做到这一点。到处玩。

ol,li {
    margin: 0;
    padding: 0;
}

ol {
    counter-reset: foo;
    display: table;
}

li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}

li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
    padding-right: .3em;
}