text-spacing : text-indent, letter-spacing, line-height, word-spacing, white-space

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

 

text-indent : 들여쓰기

<div class="paragraph-wrapper">
      <p class="paragraph">
            아주 재미있는 월드컵이었습니다. 김영권과 손흥민의 골로 독일을 이겼습니다. 하지만 16강 진출에는 실패했습니다.
            우리 태극전사들 모두 자랑스럽습니다. 정말 통쾌했습니다.
      </p>
</div>


.paragraph-wrapper .paragraph {
  text-indent: 20px; // 첫줄 들여쓰기 20px
  text-align-last: center; // 마지막 줄은 가운데 정렬
  background: #49ca69;
}

 

letter-spacing : 글자 사이의 공백

.paragraph-wrapper .paragraph {
  
  letter-spacing: 30px;
  
  ..(생략)..
}

Line Height : 줄 사이 공간

1보다 크면 멀어지고 1보다 작으면 가까워진다.

 

line-height가 1보다 작을 때

.paragraph-wrapper .paragraph {

  line-height: 0.8;
...생략..
}

 

line-height가 1보다 클 때

.paragraph-wrapper .paragraph {

  line-height: 1.8;
...생략..
}

 

word-spacing : 단어 사이 공백

letter-spacing은 글자 사이의 공백이다. 차이가 있다.

.paragraph-wrapper .paragraph {

  word-spacing: 20px;
..생략..
}

 

White Space : 자동 줄맞춤 할까(wrap)? 말까(nowrap)?

가장 자주 보이는 속성이다.

nowrap으로 설정하면 그냥 한줄로 쭈 우욱 간다.

.paragraph-wrapper .paragraph {
  white-space: nowrap;
}

설정하지 않으면 기본값인 wrap이다.

.paragraph-wrapper .paragraph {
  /*  white-space: nowrap; */
}