CodePen Embed - text-overflow

<p class="p1">hidden/ clip = Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

<p class="p2">auto/ clip = Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

<p class="p3">hidden/ ellipsis = Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

<p class="p4">scroll/ ellipsis = Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

p{
  width: 200px; 
  white-space:nowrap;
}
p.p1{
  overflow: hidden;
  text-overflow: clip;
}
p.p2{
  overflow: auto;
  text-overflow: clip;
}
p.p3{
  overflow: hidden;
  text-overflow: ellipsis;
}
p.p4{
  overflow: scroll;
  text-overflow: ellipsis;
}

This Pen is owned by gahyun on CodePen.

See more by @gahyun on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.