如何在项目符号列表中实现正确的缩进换行？

在项目符号列表中实现缩进换行

处理换行的冗长项目符号列表项时，需要延续与第一行水平对齐。默认情况下，换行文本出现在项目符号下方，从而形成不对齐的外观。

要解决此问题，我们可以采用利用额外 div 的方法。

解决方案

1. 将子弹包裹在Div:
   将项目符号放在单独的
   中元素，提供绝对定位并调整其边距以匹配项目符号的外观。
2. 将两个 Div 包装在容器 Div 中：
   创建一个容器
   保存项目符号和列表项文本

   元素。应用必要的样式来控制填充和溢出。
3. 对齐列表项文本：
   在容器内，确保文本
   有适当的填充，使其与项目符号水平对齐。

   代码示例

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

   通过遵循这种方法，项目符号列表将缩进到项目符号右侧，与第一行对齐，并提高列表的可读性和美观性。