JSFiddle - React, Tailwind, and code Playground

by cferdinandi

HTML

<div class="truncate">
	Port tender gun spanker lanyard heave to topmast. Heave down draught piracy loaded to the gunwalls mizzenmast topsail Brethren of the Coast. Lanyard snow Jack Ketch swing the lead maroon spike black jack.
</div>

CSS

.truncate {
  width: 50%;
  text-overflow: ellipsis;
  
  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
 }