새소식
반응형
WEB/CSS
[CSS] CSS white-space 개행문자를 처리하는 방법 알아보기.
- -
반응형
2021-03-10
출처 : www.w3schools.com/
- normal
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
모든 개행 문자 / space / tab들이 병합되며, 브라우저 끝에서 자동 줄 바꿈을 해준다. css에서의 디폴트 값으로 적용된다.
실행결과
- nowrap
Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
normal과 마찬가지로 모든 개행 문자 / space / tab들이 병합되지만, 자동 줄 바꿈이 일어나지 않는다. 줄 바꿈을 위해서는 반드시 <br> 태그가 필요하다.
실행결과
- pre
Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
모든 개행 문자 / space / tab들이 병합되지 않고 유지되며, 자동 줄 바꿈은 되지 않는다.
실행결과
- pre-line
Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
space / tab 은 병합되지만 개행 문자는 유지된다. 또한 자동 줄 바꿈이 된다.
실행결과
- pre-wrap
Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
개행 문자/ space / tab들이 병합되며 자동 줄 바꿈이 된다.
실행결과
- initial
Sets this property to its default value.
초기 설정된 default 값을 따른다. 거의 normal이다.
실행결과
- inherit
Inherits this property from its parent element.
부모의 속성을 따라간다. 부모가 없을 경우 거의 normal이다.
실행결과
사용코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>+THIS IS TEST +</title>
<style type="text/css">
/* white-space 선언부 */
div{
white-space: /* 속성값 */;
}
</style>
</head>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit aliquet iaculis.
Duis consequat libero diam, in vulputate lacus varius non. Sed dictum nunc neque, vel vestibulum dolor luctus luctus.
Morbi euismod blandit elit pulvinar scelerisque.
Pellentesque nisi diam, venenatis ut consequat vel, dictum a sem.
Cras porttitor, augue accumsan sodales mollis, metus nisl faucibus arcu, ac finibus neque nisl a lectus.
Maecenas efficitur mollis urna, at egestas nisl egestas ac.
Vivamus fringilla blandit sodales.
</div>
</body>
</html>반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] CSS background 와 background-color의 차이 알아보기. (0) | 2021.03.13 |
|---|---|
| [CSS] CSS text-align 을 통한 데이터(텍스트)정렬 방법 알아보기 (0) | 2021.03.11 |
| [CSS] CSS 백그라운드 이미지 가운데 정렬하는 / 반복없애는법 (0) | 2021.03.09 |
| [CSS] CSS 포지션(position) Relative / Absolute 알아보자! (0) | 2020.10.15 |
| [CSS] CSS 캐스케이딩Cascading에 대하여 쉽게 알아보자! (0) | 2020.10.11 |
Contents
소중한 공감 감사합니다