문단 작성 중에 대부분 블릿기호 앞 기준으로 텍스트를 들여쓰기하는 경우가 종종 발생한다. 그럴 때 간단하게 CSS로 들여쓰기를 구현할 수 있다.

HTML Markup

<ul class="txt-box">
    <li class="txt-box__list">
        1.This is a static template
    </li>
    <li class="txt-box__list">
        2.bundling involved!
    </li>
</ul>

CSS

.txt-box {
    width: 200px;   
}
.txt-box__list {
    text-indent: -14px;
    padding-left: 14px;
}

들여쓰기 다른 버전

HTML <p> 요소 안에 포함된 텍스트에 블릿 기준으로 들여쓰기와 줄바꿈을 적용하려면, list-style-position, text-indent, margin-left, 그리고 white-space 속성을 함께 사용하여 스타일링할 수 있습니다.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Text-indent</title>    
  </head>
  <body>
      <p>
      <span class="bullet">&#8226;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br> Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </body>
</html>

css

p {
  list-style-position: inside;
  text-indent: -20px;
  margin-left: 20px;
  white-space: pre-wrap;
}

.bullet {
  display: inline-block;
  width: 20px;
}

위의 코드는 <p> 요소 안에 포함된 블릿 아이콘과 텍스트에 블릿 기준으로 들여쓰기와 줄바꿈을 적용하며, list-style-position 속성을 inside으로 설정하여 블릿 아이콘이 텍스트와 같은 줄에 위치하도록 합니다. text-indent와 margin-left 속성을 함께 사용하여 블릿 아이콘과 텍스트의 들여쓰기를 조정합니다. white-space 속성을 pre-wrap으로 설정하여 줄바꿈이 유지되도록 합니다. 마지막으로, display 속성을 inline-block으로 설정하여 블릿 아이콘의 너비를 지정하고, width 속성을 사용하여 블릿 아이콘과 텍스트 사이의 간격을 조절합니다.