<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.