마크업개발 메모장

br 사용 안하고 white-space로 줄바꿈 하기 본문

HTML/CSS

br 사용 안하고 white-space로 줄바꿈 하기

parra 2015. 3. 21. 23:29

줄바꿈 하는데  br 아니면 span을 주로 사용했었는데 css로 훨씬 간단하게 줄바꿈을 할 수 있다!!


바로 요 div { white-space : pre-line; } 방법을 사용하면 가능하다!

white-space 이건 공백 문자를 어떻게 처리할지 결정하는 속성이다.


속성 값으로는

normal : 기본 값으로 연속하는 공백을 하나로 처리한다.

nowrap : 연속하는 공백을 하나로 처리하고 줄바꿈을 하지 않는다.

per : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 한다. 원본 그대로 표시한다. 영역에서 벗어날 수 있다.

pre-line : 연속하는 공백은 하나로 취급하고 줄바꿈을 한다. width에 맞춰진다.

pre-wrap : 연속하는 공백을 원본 그대로 표시하고 줄바꿈도 한다. width에 맞춰진다.


하지만 이것은 ie8이상부터 지원되서 사용할때 신중하게 사용해야겠다...또르르


예제보기 : http://jsfiddle.net/dhv8vta9/



자세한 설명은 http://www.w3schools.com/cssref/pr_text_white-space.asp 요기 참고~