넘치는 글자 css로 다루기

너비가 유연하게 바뀌거나 글자 수가 다양하거나 많을 때
서버에서 제어하기 곤란할 때 CSS로 간단히 표현하는 방법들

만약 display 속성의 inline 값과 같이 요소가 너비를 가질 수 없는 경우에는
너비를 가질 수 있게 변경해줘야 한다.(display:block;)

inline-block 과 같이 콘텐츠에 따라 유동적인 너비를 가진다면
직접 요소의 너비를 설정해야 한다. 일정한 고정된 너비를 가지는 것이 전제 조건!

• 한줄을 처리할 때

.target {
    display: inline-block;
    width: 300px;
    white-space: nowrap; // 자동 줄바꿈 방지
    overflow: hidden; // 넘치는 부분을 화면에서 숨김
    text-overflow: ellipsis; // 숨긴 부분을 말줄임표(...) 처리
}

• 여러줄을 처리할 때

.target {
    display: inline-block;
    width: 200px;
    // white-space: nowrap; 한줄 처리용
    overflow: hidden;
    text-overflow: ellipsis;

    /* 여러 줄 자르기 추가 스타일 */
    white-space: normal; // 여러줄로 표기
    line-height: 1.2; // 한줄 기준 높이 설정
    max-height: 3.6em; // 3줄의 경우 한줄 높이 3배
    text-align: left; // 양쪽 정렬이면 줄임표가 숨겨질 수 있으니 좌측 정렬
	word-wrap: break-word; // 잘라버릴 글자를 단어 단위로
	display: -webkit-box; // 여백삽입 등 유연한 높이 증가 위해 플렉스박스형태로 
	-webkit-line-clamp: 3; // 보여줄 줄 갯수 
	-webkit-box-orient: vertical; // 플렉스 박스의 방향 설정
}

이렇게 다 적용하면 3줄까지 보이고 끝에는 ...로 끝난다.