white-space

1 개요
2 문법
3 예제

개요

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다.

기본값 : normal
상속 : Yes
애니메이션 : No
버전 : CSS Level 1

문법

white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit

normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

	스페이스와 탭¹	줄바꿈²	자동 줄바꿈³
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
줄바꿈의 처리방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
내용이 영역의 크기를 벗어날 때 처리방법입니다. O는 자동으로 줄바꿈하여 영역 내에 내용을 표시하는 것이고, X는 영역을 벗어나더라도 입력된 대로 출력하는 것입니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      p {
        font-family: Consolas;
        font-size: 16px;
      }
      .t {
        font-weight: bold;
        color: #009688;
      }
      .a {
        white-space: normal;
      }
      .b {
        white-space: nowrap;
      }
      .c {
        white-space: pre;
      }
      .d {
        white-space: pre-wrap;
      }
      .e {
        white-space: pre-line;
      }
    </style>
  </head>
  <body>
    <p class="t">white-space: normal;</p>
    <p class="a">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: nowrap;</p>
    <p class="b">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre;</p>
    <p class="c">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre-wrap;</p>
    <p class="d">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
    <p class="t">white-space: pre-line;</p>
    <p class="e">    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Nunc viverra lectus in nisl convallis, id mattis tortor ultrices. Quisque a justo non nisl maximus pretium quis sit amet tortor.</p>
  </body>
</html>

CSS / Reference / overflow

overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / font-variant

font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / background-size

background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / white-space

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / aspect-ratio

aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.

CSS / Reference / empty-cells

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / line-height

line-height 속성은 텍스트 줄 간격(줄 높이)을 조절하는 데 사용됩니다. 텍스트의 가독성을 높이고, 디자인적으로 더 일관된 레이아웃을 만들기 위해 자주 사용됩니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / text-shadow

text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow 속성을 사용합니다.

CSS / Reference / background-clip

HTML 요소는 박스(box)로 이루어져 있습니다. 배경 이미지나 배경색을 그 박스 중 어디에 넣을 지 정하는 속성이 background-clip입니다. 기본값 : border-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.