한줄, 여러줄 말줄임 처리

<div class="wrap">
  <p class="line2">
  Lorem Ipsum is simply dummy text of the printing and typesetting 
  industry. Lorem Ipsum has been the industry's standard dummy 
  text ever since the 1500s, when an unknown printer took 
  a galley of type and scrambled it to make a type specimen book.
  </p>
</div>

한줄 처리는 아래처럼 간단하게 처리할 수 있습니다.

<p class="line1">
Lorem Ipsum is simply 
dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy 
text ever since the 1500s, when an unknown 
printer took a galley of type and scrambled it 
to make a type specimen book.
</p>

.line1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

여러줄 말줄임 처리는 -webkit-line-clamp CSS 속성을 사용하면 됩니다.
콘텐츠를 지정한 줄 수만큼으로 제한합니다.
display 속성을 -webkit-box 또는 -webkit-inline-box로, 
그리고 -webkit-box-orient 속성을 vertical로 설정한 경우에만 동작합니다.

 

<div class="wrap">
  <p class="line2">
  Lorem Ipsum is simply dummy text of the printing and 
  typesetting industry. Lorem Ipsum has been the 
  industry's standard dummy text ever since the 1500s, 
  when an unknown printer took a galley of type and 
  scrambled it to make a type specimen book.
  </p>
</div>

.wrap {
  padding: 10px;
  border:1px solid #333;
  width: 150px;
  height: 60px;
}
.line2 {
  display: -webkit-box;
  margin:0;
  word-wrap: break-word;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
  text-overflow: ellipsis;
  line-height: 20px;
}

 

 

 

 

IE에서는 여러줄 ... 처리는 되지 않습니다..