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>
'WEB > CSS' 카테고리의 다른 글
position : 요소 배치하기 - static, relative, fixed, absolute (3) | 2022.06.02 |
---|---|
Box Model / content-box, border-box / background-clip / 배경 이미지 설정 태그 (1) | 2022.05.31 |
목록태그 CSS : 리스트 블릿기호 변경, 들여쓰기/내어쓰기 (0) | 2022.05.30 |
font-size : medium, smaller, larger, px, % / em, rem 비교 / 줄 바꿈, 글자 간격, 단어 간격 (0) | 2022.05.30 |
CSS : display 태그 속성 - none, block, inline, inline-block (0) | 2022.05.30 |