[HTML/CSS] 넘치는 텍스트 표기하기 (overflow, text-overflow)

넘치는 텍스트 표기하기

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;
}