[css , mixin] 말줄임 - ie 에서만 1줄, 그 외 브라우저 2~3줄

[css , mixin] 말줄임 - ie 에서만 1줄, 그 외 브라우저 2~3줄 

 

.title {
  //그외 브라우저 
  @include text-cut(2);  


  //ie 안에선 1줄
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @include text-cut;
    display: block;
    height: auto;
  }
}



//mixin 

@mixin text-cut($c:"") {
  @if $c != ""{
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: $c; /* 라인수 */
      -webkit-box-orient: vertical;
      word-wrap:break-word;
  }@else{
      text-overflow:ellipsis;
      white-space: nowrap;
      overflow: hidden;
  }
}

 

 

 

 

ie 구분 css

 /* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 /* Enter your style code */
}
 
/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
 /* Enter your style code */
}
 
/* IE6,7 */
@media screen\9 {
 /* Enter your style code */
}
 
/* IE8 */
@media \0screen {
 /* Enter your style code */
}
 
/* IE6,7,8 */
@media \0screen\,screen\9 {
 /* Enter your style code */
}
 
/* IE9,10 */
@media screen and (min-width:0\0){
 /* Enter your style code */
} 

 

참고사이트 : unto.kr/blog/coding-info/only-ie-css/