CSS로 말줄임표(Ellipsis)

한 줄 말줄임표 구현하기

가장 기본적인 한 줄 말줄임표는 다음과 같은 CSS 코드로 구현할 수 있습니다[1]:

.single-line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
}

주요 속성 설명:

• white-space: nowrap으로 텍스트를 한 줄로 유지
• overflow: hidden으로 넘치는 텍스트를 숨김
• text-overflow: ellipsis로 말줄임표 표시

여러 줄 말줄임표 구현하기

여러 줄의 텍스트를 말줄임표로 처리하려면 다음 코드를 사용합니다[2]:

.multi-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

사용자 경험 최적화 팁

접근성 고려사항:

• title 속성을 추가하여 전체 텍스트를 툴팁으로 제공
• 스크린리더 사용자를 위한 aria-label 추가

반응형 디자인:

• 미디어 쿼리를 활용하여 화면 크기별 최적화
• 유동적인 width 값 사용