JSFiddle - React, Tailwind, and code Playground

by Iván Pereira

HTML

<p>first > second > third<br/>
second > third > fourth <br>
fifth > sixth > seventh</p>

CSS

p{
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: left;
  white-space: nowrap;
  width: 140px;
}

JavaScript

[].forEach.call(document.getElementsByTagName("p"), function(item) {

	var str = item.innerText;
  
  //Change the operators
  str = str.replace(/[<>]/g, function(char){ return ({"<" : ">", ">" : "<"})[char] });
  
  //Get lines
  var lines = str.split(/\n/);
  
  //Reverse the lines
  lines = lines.map(function(l){ return l.split("").reverse().join("") }); 
  
  //Join the lines
  str = lines.join("<br>");

	item.innerHTML = str;

});