일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Archives
- Today
- Total
Tags
- HTML
- zoom:1
- css 줄바꿈
- display:inline-block
- 코딩 예제
- transform 효과
- ie7 inline
- 속성 ease
- 모던 웹을 위한 JavaScript + jQuery 입문
- CSS
- html br
- Array 객체
- css로 줌인 효과 주기
- CSS3 효과
- String 객체
- transform 전환효과
- html 줄바꿈
- 한빛미디어
- css3
- footer 고정
- 레이아웃 잡기
- 속성 scale
- Object 객체
- ie7 핵
- Date 객체
- Number 객체
- float 깨짐
- zoomin 효과
- CSS 효과주기
- Math 객체
마크업개발 메모장
br 사용 안하고 white-space로 줄바꿈 하기 본문
줄바꿈 하는데 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 요기 참고~
'HTML/CSS' 카테고리의 다른 글
CSS3 transform으로 zoomin 효과 내기 (0) | 2015.07.17 |
---|---|
ie7에서 inline-block 사용하기 (0) | 2015.03.12 |
html css로 footer 하단에 고정하기 (0) | 2015.02.05 |
CSS3 animation를 이용한 이미지 움직이기 (0) | 2014.11.19 |
CSS3 transition 속성 (0) | 2014.11.17 |