css 문자열 개행(\n) 및 공백(\t) 처리와 ellipsis(...)

오늘은 실무에서 정말 많이 사용되는 문자열 개행 및 공백 처리에 대해서 알아보겠습니다.

문자열을 공백이나 개행 있는 그대로 입력하는 경우도 있고 외부 컨텐츠를 가져오는 경우 공백이나 개행이 \n이나 \t 등으로 들어가 있는 경우가 있습니다. 이렇게 입력받은 문자열을 어떻게 client에 출력할지 결정할 수 있게 해주는게 css의 'white-space' 속성 입니다.

 

먼저 설명을 진행 한 후 가장 하단에 실행 예시를 보여드리겠습니다. 바쁘신 분은 마지막을 바로 보셔도 됩니다.

 

1. whtie-space의 속성 종류

• nowrap : 문자열에 있는 개행을 처리하지 않고 연속되는 공백은 한번만 처리 합니다. 또한 영역을 초과할 경우에도 텍스트가 영역을 넘어서 한줄로 출력됩니다.
• nomal : nomal은 nowrap처럼 개행은 처리가 되지 않고 연속되는 공백도 한번만 처리됩니다. 하지만 nowrap과는 다르게 영역을 초과할 경우 자동으로 줄바꿈이 됩니다.
• pre : pre는 문자열에 있는 공백과 개행이 모두 그대로 유지 됩니다. 그리고 문자열이 영역을 초과 할 경우 자동 줄바꿈이 되지 않고 영역을 초과하여 그대로 출력됩니다.
• pre-line : pre-line은 개행은 문자열의 개행은 그대로 유지하고 연속되는 공백은 한번만 처리합니다. 또한 영역을 초과할경우 자동 줄바꿈을 실행합니다.
• pre-wrap : 개행과 연속되는 공백을 모두 그대로 출력합니다. 또한 영역을 초과할 경우 자동 줄바꿈을 실행합니다.

 

실행 예제

 

See the Pen Untitled by 이승철 (@ibnviuin-the-builder) on CodePen.

 

 

2. overflow 처리

문자열이 영역을 초과할 경우 일반적으로 넘어가는 부분은 출력을 하지 않고 사용자에게 이를 보여주기위해 ellipsis(...)처리를 하게 됩니다. 이 방법은 overflow를 hidden으로 처리하고 text-overflow를 ellopsis로 하여 처리하게 됩니다. 또한 webkit을 사용하여 여러줄을 처리 할 수도 있습니다.

 

코드 예제

 

 

See the Pen text overflow by 이승철 (@ibnviuin-the-builder) on CodePen.

 

 

이상으로 웹에서 문자열 처리하는 기본적인 방법을 알아보았습니다. 수정해야할 부분이 있다면 언제는 피드백 부탁 드립니다