CSS 줄바꿈 하는 방법

CSS에서 텍스트의 줄 바꿈과 관련된 속성은 white-space입니다. white-space 속성은 공백 문자를 처리하고 줄 바꿈 동작을 지정하는 데 사용됩니다.

다음은 white-space 속성의 주요 값들입니다.

 

- normal

    기본값으로, 연속된 공백 문자를 하나로 처리하고 줄 바꿈이나 공백 문자가 있는 경우 적절히 처리합니다.

// cssCopy code
p
{ 
	white-space: normal; 
}

반응형

- nowrap

    모든 텍스트를 한 줄에 표시하고 줄 바꿈이 없도록 합니다.

//cssCopy code
p
{ 
	white-space: nowrap; 
}

 

- pre

    HTML 코드와 같이 공백 문자를 그대로 유지하고 줄 바꿈을 적용합니다.

//cssCopy code
pre 
{ 
	white-space: pre; 
}

반응형

- pre-wrap

    HTML 코드와 같이 공백 문자를 그대로 유지하면서 줄 바꿈을 적용합니다.

cssCopy code
pre 
{ 
	white-space: pre-wrap; 
}

 

- pre-line

    줄 바꿈 문자(\n)와 같은 공백 문자를 유지하고, 다른 공백 문자는 하나로 처리합니다.

cssCopy code
p
{ 
	white-space: pre-line; 
}

반응형

이러한 white-space 속성을 사용하여 텍스트의 줄 바꿈을 조절할 수 있습니다. 특히 코드를 표시하는 경우나 텍스트 블록에서 여러 공백이나 줄 바꿈이 포함된 경우에 유용합니다.