CSS-L2-051 / 텍스트

한 줄 말줄임

초급

문제

.title에 너비 100px, 한 줄, 숨김 overflow, 말줄임 표시를 지정하세요.

준비된 HTML은 그대로 사용합니다. 선택자와 스타일을 작성하세요. 결과 화면과 조건을 함께 확인하세요.

준비된 HTML

<!doctype html>
<html lang="ko">
<head><meta charset="utf-8"><title>실습</title></head>
<body>
<p class="title">아주 긴 제목을 한 줄에서 줄입니다</p>
</body>
</html>

힌트

말줄임에는 제한된 폭과 overflow 설정도 필요합니다.

해설·정답 보기

text-overflow만으로 줄이 줄어들지는 않습니다. 세 속성을 조합합니다.

.title{width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

style.css화면·구조 확인

풀이 코드

코드는 이 브라우저에 자동 저장돼요.

코드를 작성하고 채점하기를 눌러보세요.

학습용으로 제공된 조건을 확인해요. 알고리즘 사용 방식·설계 의도는 해설과 함께 비교해보세요.