나눔웹 UI/UX 꿀팁
레이아웃을 망치는 긴 글, 예쁘게 '...'으로 자르는 마법의 CSS
상품 목록이나 블로그 게시판을 예쁘게 바둑판(Grid) 모양으로 만들었는데, 어떤 글은 제목이 짧아서 1줄이고 어떤 글은 너무 길어서 3줄로 넘어가는 바람에 카드 높이가 삐뚤빼뚤해진 경험 있으신가요?
개발 용어로는 이를 '말줄임표(Ellipsis) 처리'라고 합니다. 레이아웃 붕괴를 막고 디자인의 칼각을 유지하는 필수 CSS 기법을 소개합니다.
💡 옛날 방식(서버에서 글자 자르기)은 왜 안 좋을까요?
과거에는 "제목이 20자를 넘으면 잘라주세요"라고 서버 개발자에게 요청했습니다. 하지만 PC에서는 화면이 넓어 30자도 들어가고, 모바일에서는 15자만 넘어도 줄바꿈이 일어납니다. 반응형 웹 시대에는 기기 화면 너비에 맞춰 유연하게 글자를 자르는 CSS 방식이 무조건 정답입니다.
1. 제목용: 무조건 1줄만 보여주고 자르기
게시판 제목이나 한 줄짜리 상품명에 주로 쓰이는 기법입니다. 글자가 부모 박스 영역을 넘어가면 줄바꿈을 막고 숨긴 뒤 '...'을 붙여줍니다.
/* 1줄 말줄임표 CSS 공식 (통째로 복사해서 쓰세요!) */
.text-truncate-1 {
width: 100%;
white-space: nowrap; /* 1. 줄바꿈을 절대 하지 마라 */
overflow: hidden; /* 2. 박스를 넘어가는 글자는 숨겨라 */
text-overflow: ellipsis; /* 3. 잘린 부분 끝에 '...'을 붙여라 */
}
2. 본문 요약용: 원하는 줄 수(2줄, 3줄)에서 자르기
상품에 대한 상세 설명이나 블로그 본문 미리보기에서 가장 많이 쓰이는 '멀티 라인 말줄임 (Line-clamp)' 기법입니다. 지정한 숫자까지만 줄바꿈을 허용하고 그 이후를 자릅니다.
/* 2줄 말줄임표 CSS 공식 */
.text-truncate-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; /* 👈 여기서 원하는 줄 수를 마음대로 지정하세요 (예: 3) */
overflow: hidden;
}
"잘 통제된 그리드는 브랜드의 신뢰도를 결정합니다."
나눔웹은 고객이 어떤 길이의 텍스트를 입력하더라도,
사전에 정의된 UI 규칙 안에서 가장 안정적이고 아름다운 결과물을 유지합니다.
