<div>
  <p class="text w0">PXD 경험개발그룹은 Front-End 기술을 활용해 UX(User eXperience) 구현 방법을 탐구하며 아키텍쳐 설계 및 개발을 합니다.</p>
  <p class="text w1">PXD 경험개발그룹은 Front-End 기술을 활용해 UX(User eXperience) 구현 방법을 탐구하며 아키텍쳐 설계 및 개발을 합니다.</p>
  <p class="text w2">PXD 경험개발그룹은 Front-End 기술을 활용해 UX(User eXperience) 구현 방법을 탐구하며 아키텍쳐 설계 및 개발을 합니다.</p>
</div>
@mixin ellipsis($type: 0) {
  overflow: hidden;
  text-overflow: ellipsis;
 @if($type == 0) {
    white-space: nowrap;
    word-wrap: normal;
    word-wrap: break-word;
  }@else {
    display: -webkit-box;
    -webkit-line-clamp: $type;
    -webkit-box-orient: vertical;
  }
}
.text {
  width: 300px;
  border: 1px solid;
   &.w0 {
    @include ellipsis;
  }
   &.w1 {
    @include ellipsis(1);
  }
   &.w2 {
    @include ellipsis(2);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.