CSS-Richtungsstil funktioniert nicht ordnungsgemäß

Question

Wenn wir direction: rtl; in CSS hinzufügen, dann funktionieren die Stile word-wrap und word-break nicht. Wie können wir dieses Problem in Pure CSS lösen?

Hinweis: Ich brauche Browser IE9 + und Chrom

#container { 
 
\t \t height: 440px; 
 
\t \t width: 150px; 
 
\t \t left: 40%; 
 
\t \t top: 20%; 
 
\t \t border: 2px solid green; 
 
\t \t margin: 0 auto; 
 
\t } 
 
\t #leftDiv{ 
 
\t \t width: 70px; 
 
\t \t float: left; 
 
\t \t word-wrap: break-word; 
 
\t \t overflow: hidden; 
 
\t \t line-height: 20px; 
 
\t \t height: 20px; 
 
\t } 
 
\t #centreDiv{ 
 
\t \t width: 10px; 
 
\t \t float: left; 
 
\t } 
 
\t #rightDiv{ \t 
 
\t \t //word-wrap: break-word; 
 
\t \t width: 70px; 
 
\t \t float: right; 
 
\t \t direction: rtl; 
 
\t \t overflow: hidden; 
 
\t \t line-height: 20px; 
 
\t \t height: 20px; 
 
\t } 
 
    
 

<div id="container"> 
 
\t \t <div id='leftDiv'> 
 
\t \t Java121HTML121HTML121Javscript121 
 
\t \t </div> 
 
\t \t <div id='centreDiv'> 
 
\t \t \t ... 
 
\t \t </div> 
 
\t \t <div id='dummy'> 
 
\t \t <div id='rightDiv'> 
 
\t \t Java121HTML121HTML121Javscript121 
 
\t \t </div> 
 
</div>

zu unterstützen, wenn Sie mit der rechten div Wortbruch Kommentar- ändert

Answer 1

Es scheint zu funktionieren, unter dem Lauf ist Code und angehängter Screenshot.

div{ 
 
    direction: rtl; 
 
    max-width: 600px; 
 
    border: 1px solid black; 
 
    word-wrap: break-word; 
 
}

<div> 
 
    <h1>Lorem ipsum dolor sit amet, consecteturasdasdasdasdasdasdasdasdasdasdasdasdasdasd adipiscing elit. Quisque sagittis consequat augue, eget euismod quam ultricies at. Donec venenatis, turpis.</h1> 
 
</div>