Properties

Properties

Editing
  • account_tree
  • bug_report

white-space

선택자 요소 내부의 공백을 처리하는 방법을 설정하며 줄바꿈에 관여한다.

사용 가능한 값 타입

<'white-space'>

DEVDIC-Specified Data Types

white-space 속성에 사용되는 타입이다.

  • Text Module Level 3
    normal | pre | nowrap | pre-wrap | break-spaces | pre-line

사용되는 키워드

  • break-space

    Text Module Level 3

    pre-wrap과 동일하나 보존된 공백 또는 기타 공백 구분 기호의 시퀀스는 줄 끝을 포함하여 항상 공간을 차지한다. 줄바꿈은 보존된 모든 공백 문자 뒤에 그리고 다른 모든 공백 구분 기호 뒤에 존재한다.

  • normal

    CSS1.0

    공백이 존재하는 경우에 하나의 공백으로 처리하며 공간이 좁은 경우 다음 행으로 줄바꿈 처리한다.

  • nowrap

    연속된 공백은 하나의 공백으로 처리하고 공간이 좁더라도 태그가 존재하지 않는 경우 이외에는 절대로 줄바꿈 처리를 하지 않는다.

  • pre

    코드 상에 작성된 대로 텍스트가 출력이 된다. 즉 코드 상의 다수의 공백은 공백 그대로, 줄바꿈이 있다면 줄바꿈 그대로 출력을 한다.

  • pre-line

    코드 상의 다수의 공백은 하나의 공백으로 처리하지만 줄바꿈이 있다면 줄바꿈 그대로 출력을 한다.

  • pre-wrap

    코드 상의 다수의 공백은 하나의 공백으로 처리되고 줄바꿈이 있다면 줄바꿈 그대로 출력을 하되 공간이 부족한 경우에는 자동으로 다음 행으로 내려간다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

  • 〈'white-space'〉normal
    CSS1.0

    공백이 존재하는 경우에 하나의 공백으로 처리하며 공간이 좁은 경우 다음 행으로 줄바꿈 처리한다.

  • CSS1

    연속된 공백은 하나의 공백으로 처리하고 공간이 좁더라도 태그가 존재하지 않는 경우 이외에는 절대로 줄바꿈 처리를 하지 않는다.

    Example
  • CSS1

    코드 상에 작성된 대로 텍스트가 출력이 된다. 즉 코드 상의 다수의 공백은 공백 그대로, 줄바꿈이 있다면 줄바꿈 그대로 출력을 한다.

    Example
  • CSS1

    코드 상의 다수의 공백은 하나의 공백으로 처리하지만 줄바꿈이 있다면 줄바꿈 그대로 출력을 한다.

    Example
  • CSS1

    코드 상의 다수의 공백은 하나의 공백으로 처리되고 줄바꿈이 있다면 줄바꿈 그대로 출력을 하되 공간이 부족한 경우에는 자동으로 다음 행으로 내려간다.

    Example
  • Text Module Level 3

    pre-wrap과 동일하나 보존된 공백 또는 기타 공백 구분 기호의 시퀀스는 줄 끝을 포함하여 항상 공간을 차지한다. 줄바꿈은 보존된 모든 공백 문자 뒤에 그리고 다른 모든 공백 구분 기호 뒤에 존재한다.

    Example

    노란색으로 표시된 'commodo' 텍스트는 'commodo  ' 처럼 끝에 공백이 다수 존재한다. pre-wrap 키워드와 차이점은 줄바꿈이 발생하는 위치에서도 줄 끝에 공백이 존재한다는 것이다. 따라서 공간이 부족하면 다음 줄로 개행이 될수 밖에 없다.

구문

  • element.style.whiteSpace = "pre-line";
    CSS1

버전 명세

Modules
Module NameStatusSummary
Text Module Level 3

Last review date: 2022-6-26

지원 웹브라우저