넘치는 텍스트, 공백 표현하는 태그 : overflow, text-overflow, white-space

1. text-overflow

넘치는 (범위에서 넘어가는) 텍스트를 어떻게 표기 할 것인지에 대한  태그이다.

 

- clip : 넘치는 텍스트 자름

- ellipsis : ... 으로 표시

 

 

 

 

2. overflow

넘치는 내용을 어떻게 보일지에 대한 태그

 

- visible : 기본 값 / 넘칠 경우 컨텐츠가 상자 밖으로 보여진다.

- hidden : 넘치는 부분은 숨겨서 보이지 않게 한다.

- scroll : 가로, 세로 스크롤바가 추가된다.

- auto : 자동으로 스크롤바를 추가할지가 결정된다.

 

overflow설정이 visible로 되어있는 경우는 넘치는 내용이 모두 표시되는 것이기 때문에 text-overflow가 적용되지 않는다.

 

 

 

 

3. white-space 

공백을 어떻게 처리할지에 대한 태그

 

- pre-line : 연속공백x(띄어쓰기 하나로 표현), 엔터와 <br>로 줄바꿈, 가로 길이에 따라 줄바꿈O 

- pre : 연속공백O(연속공백 반영된다.), 엔터와 <br>로 줄바꿈, 가로길이에 따라 줄바꿈x 

- pre-wrap : 연속공백O, 엔터와 <br>로 줄바꿈, 가로 길이에 따라 줄바꿈O 

- break-spaces : pre-wrap과 동일하지만, 연속공백이 줄 끝 이상이 되면 줄바꿈 

- nowrap : 연속공백x, 줄바꿈x

 

 

 

 

<style>
        p{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: clip;
        }
    </style>