text-overflow ellipsis 여러줄 ... 만들기

오늘은 div content가 여러 줄일 때... 이 나올 수 있도록 하는 방법에 대해서 포스팅해볼게요!

학원 html/css 평가에서 여러 줄일 때... 이 나왔었는데 유용할 거 같아서 남겨봅니다.

이런 식으로 마지막 줄에 ...이 나오도록 하는 방법입니다.

 

html구조는 아주 간단히만 할게요.

<section>
	<div id="topTextContainer">
    		<div class="explanation">
        	요조가 낭독하는 조해진 작가의 "산책자의 행복"은 "EBS 아이돌이 읽다, 마음을 잇다"라는 아이돌의 낭독과 기부가 결합된 프로젝트 참여 작품입니다. 요조가 낭독하는 조해진 작가의 "산책자의 행복"은 "EBS 아이돌이 읽다, 마음을 잇다"라는 아이돌의 낭독과 기부가 결합된 프로젝트 참여 작품입니다.
        	</div>
	</div>
</section>

이런식으로 긴 content를 가진 div에 css를 넣어줍니다.

section #topTextContainer .explanation{
    width: 541px;
    height: 207px;
    font-size: 30px;
    font-weight: bold;
    color: #444444;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

여기서 여러 줄 ellipsis를 위해 필요한 프로퍼티는 display, -webkit-line-clamp, -webkit-box-orient, overflow, text-overflow 이렇게 5개입니다.

display: -webkit-box;로 설정하고 일단 div를 넘어가는 content를 숨겨야 하므로 overflow: hidden;을 해줍니다.

안 보이는 부분을...으로 처리해주기 위해 text-overflow: ellipsis;를 줍니다.

제가 아직 webkit에 대한 내용을 자세히 몰라서 이해한 대로 적어볼게요.

-webkit-box-orient: vertical;은 content 내용 세로에 대해서라는 의미로 이해했습니다.

그래서 -webkit-line-clamp: 5;는 세로줄 5번째에... 을 준다라고 이해했습니다.

그래서 -webkit-box-orient와 -webkit-line-clamp을 통해서 몇 번째 줄에... 을 줄지를 정하게 되는 것이라고 이해했어요.

 

이 방법을 찾다 보니까 반응형 웹으로 브라우저 창 크기가 달라질 경우 content에 나오는 내용의 보이는 길이도 달라질 경우에는 Java Script를 이용하는 방법을 쓴다고 합니다.

아직 Java Script를 배우지 않아서 나중에 이 부분을 추가했으면 좋겠네요.