JSFiddle - React, Tailwind, and code Playground

HTML

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

<br>
<span data-content-start="https://www.google.com.ua/images/branding/g"   
      data-content-end=  "ooglelogo/2x/googlelogo_color_272x92dp.png"></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: ' ..';
}

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