<div>
  <strong>ORIGINAL TEXT: </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis quis erat eleifend, a accumsan lacus viverra. Phasellus efficitur suscipit iaculis. In nec risus tellus. Mauris laoreet suscipit risus non imperdiet. Vestibulum in dolor nulla. Sed ante eros, luctus eget suscipit nec, gravida ac turpis. Nam ac lacus rhoncus, suscipit risus sit amet, suscipit mi. Praesent eget sapien eget purus dictum condimentum. Sed eget ipsum id tortor aliquam efficitur non ut magna. Nullam ultricies porta urna, a tempor nunc ullamcorper ac. Aenean facilisis felis a dui convallis luctus.
</div>

<div class="singleLineTruncate">
 <strong>Single Line Truncate:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean molestie turpis quis erat eleifend, a accumsan lacus viverra. Phasellus efficitur suscipit iaculis. In nec risus tellus. Mauris laoreet suscipit risus non imperdiet. Vestibulum in dolor nulla. Sed ante eros, luctus eget suscipit nec, gravida ac turpis. Nam ac lacus rhoncus, suscipit risus sit amet, suscipit mi. Praesent eget sapien eget purus dictum condimentum. Sed eget ipsum id tortor aliquam efficitur non ut magna. Nullam ultricies porta urna, a tempor nunc ullamcorper ac. Aenean facilisis felis a dui convallis luctus.
</div>

div {font-family: sans-serif; font-size: 1.3rem; width: 90%; margin: 2rem auto;}

.singleLineTruncate {
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.