퀴즈 / CSS / 문제

CSS로 여러 줄 텍스트를 말줄임(...)으로 표시하기 위해 사용하는 -webkit-line-clamp 속성의 동작 조건은?

어려움 MDN Web Docs
보기 및 정답
A display: -webkit-box와 -webkit-box-orient: vertical을 함께 설정해야 한다
B float 속성이 적용된 요소의 display 값은 자동으로 inline으로 변경되어 너비와 높이 지정이 불가능해진다
C overflow: hidden과 white-space: nowrap을 함께 설정해야 한다
D text-overflow: ellipsis는 overflow: hidden 없이도 독립적으로 작동한다

해설

-webkit-line-clamp은 여러 줄 텍스트를 지정한 줄 수에서 잘라 말줄임(...)을 표시합니다. 이를 위해 display: -webkit-box, -webkit-box-orient: vertical, overflow: hidden을 함께 설정해야 합니다. 한 줄 말줄임과는 다른 접근 방식입니다.

코딩, 제대로 배우고 싶다면?

개념 확인은 퀴즈로, 실력은 실전 프로젝트로.
투더제이 코딩클래스에서 시작하세요.

정규반 살펴보기
START THE LOOP · CHOOSE

시장과 사람의 답을 봤다면,
다음 결과물의 구조를 고릅니다.

한 번의 결과에 기대지 않고 다시 만들 수 있도록, 문제 발견부터 제작·배포·수익화까지 이어지는 전체 흐름을 익혀보세요.

TTJ CLASS에서 다음 구조 고르기
처리 중...