CSS方向样式将无法正常工作

Question

如果我们在CSS中添加direction: rtl;，则word-wrap和word-break样式无效。我们如何在Pure CSS中解决这个问题？

注意：我需要支持浏览器IE9 +和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>

如果取消注释，右侧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>