CSS direction style won't work properly - css

Question

If we add direction: rtl; in CSS then word-wrap and word-break styles are not working. How we can solve this issue in Pure CSS?
Note: I need to support browsers IE9+ and chrome
#container {
height: 440px;
width: 150px;
left: 40%;
top: 20%;
border: 2px solid green;
margin: 0 auto;
}
#leftDiv{
width: 70px;
float: left;
word-wrap: break-word;
overflow: hidden;
line-height: 20px;
height: 20px;
}
#centreDiv{
width: 10px;
float: left;
}
#rightDiv{
//word-wrap: break-word;
width: 70px;
float: right;
direction: rtl;
overflow: hidden;
line-height: 20px;
height: 20px;
}
<div id="container">
<div id='leftDiv'>
Java121HTML121HTML121Javscript121
</div>
<div id='centreDiv'>
...
</div>
<div id='dummy'>
<div id='rightDiv'>
Java121HTML121HTML121Javscript121
</div>
</div>
If you uncomment right div word break will change

Answer 1

It seems to be working, below is the running code and attached 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>