웹 사이트에 텍스트를 표시할 때 텍스트가 할당된 공간을 초과하는 경우가 있을 수 있습니다. 이로 인해서 웹 사이트가 깨져 보이는 등의 문제가 있을 수 있는데요. 이 문제를 해결하기 위해 CSS는 overflow와 text-overflow 속성을 사용할 수 있습니다. 이 overflow, text-overflow 속성을 사용하면 텍스트를 오버플로 처리할 수 있습니다. 이번 포스팅에서는 웹 페이지에서 넘치는 콘텐츠를 표시하는 방법에 대해 알아보도록 하겠습니다.
넘치는 텍스트 표기하기
overflow
- visible : 넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다. (기본값)
- hidden : 넘치는 콘텐츠를 자르고 보이지 않게 처리합니다.
- auto : 넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.
- scroll : 넘치는 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.
- inherit : 부모 요소로부터 값을 상속받습니다.
visible (넘치는 콘텐츠를 그대로 박스를 넘겨 표시합니다.)
hidden (넘치는 콘텐츠를 자르고 보이지 않게 처리합니다.)
auto (넘치지 않으면 그대로 두고 넘치면 콘텐츠를 자르고 스크롤바를 표시합니다.)
scroll (넘치는 콘텐츠를 자르고 스크롤바를 표시하여 처리합니다.)
text-overflow
- clip : 넘치는 텍스트를 잘라서 표시합니다. (기본값)
- ellipsis : 말 줄임표(...)로 잘린 텍스트가 있다고 표시합니다.
clip (넘치는 텍스트를 잘라서 표시합니다.)
ellipsis (말 줄임표(...)로 잘린 텍스트가 있다고 표시합니다.)
※ text-overflow 속성은 아래 두 가지를 모두 충족할 때만 적용됩니다.
overflow 속성이 hidden, scroll, auto 일 때 (visible일 경우 적용 안됨)
white-space:nowrap (텍스트가 길어도 줄 바꿈 되지 않음) 또는 텍스트가 다음줄로 이동하지 않는 비슷한 경우
'Web > HTML, CSS' 카테고리의 다른 글
[HTML/CSS] UL, OL, DL 목록(list)에 기호 스타일 지정하기 (0) | 2023.02.28 |
---|---|
[HTML/CSS] 공백과 줄바꿈 지정하기(white-space) (2) | 2023.02.19 |
[HTML/CSS] 텍스트 쓰는 방향 지정하기 (direction) +아랍어 (1) | 2023.02.12 |
[HTML/CSS] 텍스트에 그림자 효과 넣기 (text-shadow) (0) | 2023.02.11 |
코딩팩토리님의
글이 좋았다면 응원을 보내주세요!