CSS :hover로 마우스 오버 시 넘친 콘텐츠 표시하기
웹 개발을 하다 보면 텍스트가 길어 요소의 고정된 너비를 벗어나는 경우가 자주 발생합니다. 이때 overflow: hidden 속성으로 넘치는 내용을 잘라낼 수 있는데, 문제는 사용자가 전체 내용을 볼 방법이 없다는 점입니다.
이런 상황에서 CSS의 :hover 가상 클래스를 활용하면, 마우스를 요소 위에 올렸을 때만 숨겨져 있던 콘텐츠를 자연스럽게 펼쳐 보여줄 수 있습니다.
동작 원리
핵심은 두 단계로 나뉩니다.
1. 기본 상태: overflow: hidden으로 설정하여 요소 밖으로 넘치는 텍스트를 숨깁니다.
2. 마우스 오버 시(:hover): overflow: visible로 변경하여 잘렸던 전체 내용을 화면에 표시합니다.
추가로 white-space: nowrap을 지정하면 텍스트가 줄바꿈 없이 한 줄로 유지되므로, 말줄임표(text-overflow) 처리와 함께 사용할 때 더욱 깔끔한 결과를 얻을 수 있습니다.
예제 코드
아래 예제를 실행하고 박스 위로 마우스를 가져가 보세요. 숨겨졌던 전체 텍스트가 나타납니다.
<!DOCTYPE html>
<html>
<head>
<style>
div.demo {
white-space: nowrap;
width: 180px;
overflow: hidden;
border: 2px solid blue;
}
div.demo:hover {
text-overflow: inherit;
overflow: visible;
}
</style>
</head>
<body>
<p>마우스를 올려 아래 전체 텍스트를 확인해 보세요:</p>
<br>
<div class = "demo" style = "text-overflow:clip;">이 박스 안에서 숨겨질 데모 텍스트입니다.</div>
</body>
</html>코드 설명
- width: 180px; – 데모 박스의 너비를 180px로 고정합니다.
- white-space: nowrap; – 텍스트가 줄바꿈되지 않고 한 줄로 유지됩니다.
- overflow: hidden; – 박스를 벗어나는 텍스트를 기본적으로 숨깁니다.
- text-overflow: clip; – 넘치는 텍스트를 잘라내어 표시합니다.
- div.demo:hover { overflow: visible; } – 마우스를 올리는 순간 숨겨진 텍스트 전체가 드러납니다.
이 기법은 게시판 제목 목록, 카드 UI, 테이블 셀 등 공간이 제한된 환경에서 긴 텍스트를 다룰 때 매우 유용하게 활용됩니다.