Nifty

CSS line-clamp 생성기 (텍스트 N줄로 자르기)

-webkit-line-clamp로 텍스트를 지정한 줄 수만큼만 남기고 말줄임표로 자르는 CSS를 실시간 미리보기와 함께 생성하세요 — 100% 브라우저에서 실행되며 업로드되지 않습니다.

CSS line-clamp 생성기

미리보기

line-clamp는 텍스트를 지정한 줄 수로 잘라내고 끝에 말줄임표(…)를 추가합니다. 위의 줄 수를 조절하면 미리보기와 생성된 CSS가 함께 바뀌는 것을 확인할 수 있습니다.
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

🔒 브라우저에서 생성되며 업로드되지 않습니다.

이 line-clamp 생성기의 기능

남기고 싶은 텍스트 줄 수를 입력하면 문단을 잘라내고 내용이 넘칠 때 말줄임표(…)를 붙이는 CSS를 정확히 만들어 줍니다. 이 패턴을 동작하게 하는 네 가지 선언 — display: -webkit-box, -webkit-line-clamp: N, -webkit-box-orient: vertical, overflow: hidden — 을 바로 붙여넣을 수 있는 .line-clamp 규칙으로 묶어 출력합니다. 실시간 미리보기에서 직접 입력한 샘플 텍스트가 선택한 줄 수로 잘리는 모습을 확인한 뒤 복사할 수 있습니다.

생성된 CSS 사용 방법

블록을 복사한 뒤 텍스트를 담은 요소에 .line-clamp 클래스를 적용하거나, 기존 선택자에 선언을 그대로 합쳐 넣으세요. 텍스트가 줄바꿈되도록 요소는 너비가 제한된 블록 레벨 컨테이너여야 하며, 그러면 브라우저가 줄 수 제한을 넘는 부분을 숨기고 끝에 말줄임표를 자동으로 붙입니다. -webkit- 접두사가 붙어 있지만 line-clamp는 최신 Chrome, Edge, Safari, Firefox에서 폭넓게 지원되어, 자바스크립트 없이 여러 줄 텍스트를 제한하는 표준 방법입니다.

자주 묻는 질문

왜 CSS에 -webkit- 접두사가 붙나요?

여러 줄 클램프는 -webkit- 접두사가 붙은 속성이 다루는 플렉시블 박스 레이아웃 방식에 의존하며, 현재 모든 브라우저가 이 패턴에서 해당 속성을 인식합니다. 최신 브라우저는 접두사 형태를 그대로 받아들이므로 별도의 폴백 없이 동작합니다.

텍스트가 잘리지 않는데 왜 그런가요?

line-clamp는 요소가 블록 레벨이고 너비가 제한되어 텍스트가 여러 줄로 줄바꿈되며, 내용이 줄 수 제한보다 길 때만 동작합니다. 생성된 규칙 그대로 overflow를 hidden으로 두고 컨테이너 너비를 제한했는지 확인하세요.

입력한 내용이 서버로 업로드되나요?

아니요. 줄 수, 샘플 텍스트, 생성된 CSS는 모두 브라우저에서 자바스크립트로 로컬 처리됩니다. 어떤 데이터도 전송·저장·업로드되지 않습니다.