white-space

개요

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

color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / font-family

font-family는 글꼴을 설정하는 속성입니다. 기본값 : 웹브라우저의 기본 글꼴 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / word-break

word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / empty-cells

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

CSS / Reference / caption-side

caption-side는 표(table)의 caption 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / overflow

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

CSS / Reference / opacity

opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / line-height

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

CSS / Reference / background-image

background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / border-width

border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width