예전에는 제목이나 글자수를 ... 줄일때는 개발에서 처리를 했었습니다.
CSS에서 기능이 지원되면서 한줄 말줄임은 대부분 CSS에서 처리를 하게 되었습니다.
가끔 두줄일때도 말줄임을 할때가 있는데요.
그럴땐 아래처럼 하시면 됩니다.
.text{height:50px;text-overflow:ellipsis;word-wrap:break-word;display: -webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
-webkit-line-clamp:2;
두줄일땐 2, 세줄일땐 3으로 하시면 됩니다.
(세로 높이값은 꼭 넣어야합니다.)
위처럼 두줄일때 말줄임... 처리가 됩니다.
만약 한줄일경우는 아래처럼 하시면 됩니다.
.text{display: block;width:200px;text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;overflow: hidden;}
응용해보세요~
댓글0[댓글정책]