1. Create a branch off of master
.target { /* 한 줄 자르기 */
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* 여러 줄 자르기 추가 스타일 */
white-space: normal;
line-height: 1.2;
height: 3.6em;
text-align: left;
word-wrap: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical; }
text-align: left : 글자 정렬이 양쪽 정렬이면 말 줄임표가 숨겨질 수 있으니 좌측 정렬로
word-wrap: break-word : 잘라버릴 글자를 단어 단위로
display: -webkit-box : 여백 삽입과 같이 유연한 높이 증가를 위해 플렉스 박스형태로 변환
-webkit-line-clamp: 3 : 보여줄 줄 갯수
-webkit-box-orient: vertical : 플렉스 박스의 방향 설정
크롬이나 오페라, 사파리 같은 웹킷 계열의 브라우저는 여러 줄의 글자를 자르는
자신만의 방법을 제공하고 있기에 높이나 줄 높이 설정이 필요치 않는다.
다만 크로스브라우징을 위해서 필요할 뿐이다.