✂️ CSS 텍스트 말줄임 생성기

긴 텍스트를 말줄임표(…)로 깔끔하게 잘라주는 CSS 코드를 생성하는 도구입니다. text-overflow를 이용한 한 줄 말줄임과 -webkit-line-clamp를 이용한 여러 줄 말줄임을 모두 지원합니다. 카드 제목, 목록, 미리보기 텍스트 등을 일정한 높이로 유지하고 싶은 개발자와 디자이너에게 유용하며, 모든 처리는 브라우저 안에서만 이루어져 텍스트가 서버로 전송되지 않습니다.

사용 방법

1. 말줄임 종류(한 줄 / 여러 줄)를 선택한다
2. 여러 줄인 경우 슬라이더로 최대 줄 수를 설정한다
3. 컨테이너 너비를 조절하며 실시간 미리보기를 확인한다
4. 생성된 CSS 코드를 버튼 클릭 한 번으로 복사한다

자주 묻는 질문

-webkit-line-clamp는 모든 브라우저에서 동작하나요?

Chrome, Edge, Safari, Firefox 등 대부분의 최신 브라우저에서 지원되지만, 원래 WebKit 접두사 기반 속성이므로 구형 브라우저를 지원해야 한다면 대체 스타일을 함께 고려하는 것이 좋습니다.

한 줄 말줄임과 여러 줄 말줄임은 어떻게 다른가요?

한 줄 말줄임은 overflow, text-overflow, white-space 속성으로 텍스트를 한 줄로 제한해 자르고, 여러 줄 말줄임은 -webkit-line-clamp로 지정한 줄 수를 넘는 부분을 말줄임표와 함께 숨깁니다.