箇条書きリストで適切にインデントされた改行を実現するにはどうすればよいですか?

箇条書きでのインデント改行の実現

新しい行に折り返される長い箇条書き項目を扱う場合、継続が望ましい最初の行と水平方向に揃えます。デフォルトでは、折り返されたテキストが箇条書きの下に表示され、整列されていない外観が作成されます。

この問題を解決するには、追加の 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>

   このアプローチに従うと、箇条書きリストは箇条書きの右側にインデントされ、最初の行に揃えられ、リストの読みやすさと美しさが向上します。