User content ReactJS-component

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.test {
  width: 115px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px blue solid;
  padding: 4px;
  margin: 5px;
}

JavaScript 1.7

// Полностью см. https://github.com/twitter/RTLtextarea/blob/master/src/RTLText.module.js
function getDirection(plainText) {
    var rtlChar = /[\u0590-\u083F]|[\u08A0-\u08FF]|[\uFB1D-\uFDFF]|[\uFE70-\uFEFF]/mg;
    return plainText.match(rtlChar) ? "rtl" : "ltr";
}

function UserContent(props) {
    return(
    	<div className="test" dir={getDirection(props.text)} title={props.text}>	
    		{props.text}
      </div>
    );
  };

ReactDOM.render(
	<div>
  	<UserContent text="All you need is love" />
    <UserContent text="כל מה שאתה צריך היא אהבה" />
  </div>,
  document.getElementById('container')
);