mixin 말줄임

mixin 한줄말줄임 사용

CSS

@mixin ellipse-one($wid:100%){
	overflow:hidden; 
	width:$wid; 
	text-overflow:ellipsis; 
	white-space:nowrap;
}

적용

.div{
	@include ellipse-one(80%);
}

mixin 여러줄말줄임 사용

CSS

@mixin ellipsis($line-cnt, $line-height) { 
    overflow: hidden; 
    display: -webkit-box; 
    text-overflow: ellipsis; 
    -webkit-line-clamp: $line-cnt; /* 라인수 */
     -webkit-box-orient: vertical; 
     word-wrap:break-word; 
     line-height: $line-height; 
     height: $line-height * $line-cnt; /* line-height 가 1.2em 이고 3라인을 자르기 때문에 height는 1.2em * 3 = 3.6em */ }

적용

div {
    @include ellipsis(3, 1.3em); 
}