text-overflow: ellipsis

index.html

<span>CSS is awesome, especially when you can scroll
to see extra text instead of just
  having it overlap other text by default.</span>
  
<p>CSS is awesome, especially when you can scroll
to see extra text instead of just
  having it overlap other text by default.</p>
  

style.css

span {
  display: inline-block;
  max-width: 14em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 15em;
    line-height: 1.5;
}

span, p {
  border: 1px solid black;
  padding: .5em;
  font-family: "Lucida Grande", Verdana, "Helvetica Neue", Arial;
}

text-overflow: ellipsis.markdown

text-overflow: ellipsis

A Pen by MOxFIVE on CodePen.

License.