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

웹 사이트에 텍스트를 표시할 때 텍스트가 할당된 공간을 초과하는 경우가 있을 수 있습니다. 이로 인해서 웹 사이트가 깨져 보이는 등의 문제가 있을 수 있는데요. 이 문제를 해결하기 위해 CSS는 overflow와 text-overflow 속성을 사용할 수 있습니다. 이 overflow, text-overflow 속성을 사용하면 텍스트를 오버플로 처리할 수 있습니다. 이번 포스팅에서는 웹 페이지에서 넘치는 콘텐츠를 표시하는 방법에 대해 알아보도록 하겠습니다.

 

 넘치는 텍스트 표기하기 

overflow

• visible : 넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다. (기본값)
• hidden : 넘치는 콘텐츠를 자르고 보이지 않게 처리합니다.
• auto : 넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.
• scroll : 넘치는 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.
• inherit : 부모 요소로부터 값을 상속받습니다.

 

visible (넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다.)

See the Pen visible by wjdxo513 (@wjdxo513) on CodePen.

 

 

hidden (넘치는 콘텐츠를 자르고 보이지 않게 처리합니다.)

See the Pen hidden by wjdxo513 (@wjdxo513) on CodePen.

 

 

auto (넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바를 표시합니다.)

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

 

scroll (넘치는 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.)

See the Pen scroll by wjdxo513 (@wjdxo513) on CodePen.

 

 

text-overflow

• clip : 넘치는 텍스트를 잘라서 표시합니다. (기본값)
• ellipsis : 말 줄임표(...)로 잘린 텍스트가 있다고 표시합니다.

 

clip (넘치는 텍스트를 잘라서 표시합니다.)

See the Pen clip by wjdxo513 (@wjdxo513) on CodePen.

 

 

ellipsis (말 줄임표(...)로 잘린 텍스트가 있다고 표시합니다.)

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

 ※ text-overflow 속성은 아래 두 가지를 모두 충족할 때만 적용됩니다.
 overflow 속성이 hidden, scroll, auto 일 때 (visible일 경우 적용 안됨)
 white-space:nowrap (텍스트가 길어도 줄 바꿈 되지 않음) 또는 텍스트가 다음줄로 이동하지 않는 비슷한 경우