JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Test Textschnitt</h1>
<h2>Beispiel 1</h2> 
<p>Text wird rechts abgeschnitten (Standard)</p>
<div id="d1">Dieser Text ist länger als das div-Element und wird daher abgeschnitten</div>

<h2>Beispiel 2 (rtl)</h2> 
<p>Text wird links abgeschnitten (gewünscht)</p> 
<div id="d2">Dieser Text ist länger als das div-Element und wird daher abgeschnitten</div>

<h2>Beispiel 3 (rtl)</h2>
<p>Genau wie Beispiel 2, aber anderem Inhalt<br>(Klammern, Satzzeichen...)</p>
<strong>Problem:</strong>
<p>Das letzte Zeichen wandert <u>vor</u> den Text<br> (logischerweise nicht gewünscht)</p>
<div id="d3">Ein Text (aaaaaaaaa)</div>
<div id="d4">Aber Hallo!</div>

CSS

div {
    border: 1px solid black;
    overflow: hidden;
    background-color: #EFEFEF;
    width: 15em;
    height: 1.4em;
    line-height: 1.4em;
    padding: 0.1em 0.2em;
    margin: 0.3em 0 1em 0.3em;
    text-aligh: left;
    white-space: nowrap;
}

#d2, #d3, #d4 {
    direction: rtl;
     text-aligh: left; 
}

/* Diese CSS-REegeln sind für den Test irrelevant*/
strong {font-weight: 900;}
h2::after {content: ':';}
h1 {font-size: 2.2em;text-decoration: underline;margin-bottom: 0.3em;}
h2 {font-size: 1.9em;}