CSSの方向スタイルが正しく動作しない

Question

direction: rtl;をCSSに追加すると、word-wrapとword-breakスタイルは機能しません。純粋なCSSでこの問題を解決する方法は？

注：私は、ブラウザIE9 +とクロム

#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>

をサポートする必要がありますコメントを外し、右のdiv単語の区切りが

Answer 1

を変更する場合はそれが実行されている以下、動作しているようですコードと添付されたスクリーンショット。

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>