[CSS] 공백 처리 방법 / 개행처리

양주영·2022년 5월 16일
0

css

목록 보기
3/3

현재 회사 서비스 앱에서 웹뷰로 페이지를 불러오는 경우가 존재한다. 오늘은 그 웹뷰에서 개행처리가 되지 않아 나는 문제가 있고, 아래와 같은 방법으로 해결했다.

해결 방법

whit-space
요소 안에 공백 처리를 어떻게 할 지 지정하는 속성
white space란 여백이라고도 하는데 Html에서는 공백, 공란으로 이해하면 된다.

개행처리를 위해서는 코드에 줄바꿈이 없어도 자동 줄바꿈이 되는 pre-wrap 속성을 사용했다.


normal
기본값, 공백을 여러개 넣어도 공백 1개만 표시, 글이 길어지면 텍스트가 자동 줄바꿈 됨(wrap)

nowrap
공백을 여러개 넣어도 1개만 표시, 텍스트가 길어도 줄바꿈 되지 않고 같은 줄에 계속 표시

pre
공백을 코드에 있는 그대로 표시함. <pre> 태그처럼 행동. 코드에 줄바꿈이 없다면 줄바꿈이 되지 않음

pre-wrap
공백을 코드에 있는 그대로 표시함. 코드에 줄바꿈이 없어도 자동 줄바꿈이 됨.

pre-line
공백을 여러개 넣어도 1개만 표시. 코드에 줄바꿈이 없어도 자동 줄바꿈이 되며, 코드에 줄바꿈이 있을 때도 그대로 표시

profile
뚜벅뚜벅

0개의 댓글