[CSS] 글자 수 초과하면 말줄임표 제한하기 한줄 두 줄 등등

[CSS] 글자 수 초과하면 말줄임표 제한하기 한줄 두 줄 등등

 

 

scss 

// 줄 한도 시 ... 제한
.limit-text {
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  // 2줄 한도 시 ... 제한
  &-line {
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

 

css

// 줄 한도 시 ... 제한
.limit-text {
  width: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
  // 2줄 한도 시 ... 제한
.limit-text-line{
  width: 100%;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

 

 

-webkit-line-clamp 로 라인 수를 조절해주면 된다