<div class="test1">fdsafdsafdsafdsafdsafds</div>
<hr>
<div class="test2">fdsafdsafdsafdsafdsafdsfdsfadsafdsafdsafdsafdsafdsafdsafdsafdsafdsafdsafdsafd</div>
.test1{
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.test2{
  width: 100px;
  overflow: hidden;
  word-wrap:break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.