넘치는 텍스트 표기하기
overflow
- visible : 넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다. (기본값)
- hidden : 넘치는 콘텐츠를 자르고 보이지 않게 처리합니다.
- auto : 넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.
- scroll : 넘치는 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.
- inherit : 부모 요소로부터 값을 상속받습니다.
visible (넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다.)
HTML
<div class="visible">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>
CSS
.visible {
overflow: visible;
width: 200px;
height: 50px;
border: 5px solid red;
}
hidden (넘치는 콘텐츠를 자르고 보이지 않게 처리합니다.)
HTML
<div class="hidden">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>
CSS
.hidden {
overflow: hidden;
width: 200px;
height: 50px;
border: 5px solid red;
}
auto (넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바를 표시합니다.)
HTML
<h4>텍스트 넘침(스크롤바 생성 O)</h4>
<div class="auto">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람,
</div>
<h4>텍스트 넘치지 않음 (스크롤바 생성 X)</h4>
<div class="auto">
대한으로 길이 보전하세
</div>
CSS
.auto {
overflow: auto;
width: 200px;
height: 50px;
border: 5px solid red;
}
scroll (넘치는 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.)
HTML
<h4>스크롤 생성</h4>
<div class="scroll">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>
<h4>가로 스크롤 생성</h4>
<div class="scrollX">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>
<h4>세로 스크롤 생성</h4>
<div class="scrollY">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>
CSS
.scroll {
overflow: scroll;
width: 200px;
height: 50px;
border: 5px solid red;
}
.scrollX {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
width: 200px;
height: 50px;
border: 5px solid red;
}
.scrollY {
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
height: 50px;
border: 5px solid red;
}
text-overflow
- clip : 넘치는 텍스트를 잘라서 표시합니다. (기본값)
- ellipsis : 말 줄임표(...)로 잘린 텍스트가 있다고 표시합니다.
clip (넘치는 텍스트를 잘라서 표시합니다.)
HTML
<div class="clip">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>
CSS
.clip {
overflow: hidden;
text-overflow: clip;
white-space:nowrap;
width: 100px;
height: 30px;
border: 5px solid blue;
}
ellipsis (말 줄임표(...)로 잘린 텍스트가 있다고 표시합니다.)
HTML
<div class="ellipsis">
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세. 무궁화 삼천리 화려강산 대한사람, 대한으로 길이 보전하세
</div>
CSS
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
width: 100px;
height: 30px;
border: 5px solid blue;
}'HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] UL, OL, DL 목록(list)에 기호 스타일 지정 (0) | 2024.04.20 |
|---|---|
| [HTML/CSS] 공백과 줄바꿈 지정(white-space) (0) | 2024.04.20 |
| [HTML/CSS] 텍스트 쓰는 방향 지정하기 (direction) (0) | 2024.04.20 |
| [HTML/CSS] 텍스트에 그림자 효과 넣기 (text-shadow) (0) | 2024.04.20 |
| [HTML/CSS] 텍스트 들여쓰기 / 내어쓰기 (text-indent) (0) | 2024.04.20 |