JSFiddle - React, Tailwind, and code Playground

by David Nabb

HTML

<span data-content="Look deep into nature, and then you will understand everything better"></span>

CSS

span::before, span::after {
  display: inline-block;
  max-width: 50%;
  overflow: hidden;
  white-space: pre;
}

span::before {
  content: attr(data-content-start);
  text-overflow: ellipsis;
}

span::after {
  content: attr(data-content-end);
  text-overflow: clip;
  direction: rtl;
}

JavaScript

$('span[data-content]').each( function() {
	$(this).attr('data-content-start', $(this).attr('data-content').slice(0, $(this).attr('data-content').length / 2));
	$(this).attr('data-content-end', $(this).attr('data-content').slice($(this).attr('data-content').length / 2));
})