箇条書きリストで折り返されたテキストを適切にインデントするにはどうすればよいですか?

折り返された箇条書きリスト項目の 2 行目をインデントする方法

箇条書きリストを使用する場合、リスト項目が非常に長くなることがあります。次の行に折り返されます。デフォルトでは、折り返された部分が行の先頭に揃うため、見た目が乱雑になります。これに対処するには、折り返された部分を箇条書き項目の最初の行と揃える必要があります。

この質問では、ユーザーは同じ問題に直面しています。 「問題の内容」セクションに記載されている現在のコードでは、必要なインデントが得られません。提案された解決策は、箇条書き項目を 2 つの別々の div (箇条書き用とテキスト用) に分割することです。これらの div はコンテナ div でラップされます。

提案されたアプローチを使用した改良されたコード スニペットは次のとおりです。

CSS

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

HTML

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

この更新されたコードでは、箇条書きを表す赤い四角形は絶対に配置され、テキストの最初の行と垂直方向に整列します。長いテキストはコンテナ div の左端に合わせて自然に流れます。このアプローチにより、箇条書き項目のラップされた部分の望ましいインデントが正常に実現されます。

以上が箇条書きリストで折り返されたテキストを適切にインデントするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。