CSS 方向样式无法正常工作

Question

如果我们在 CSS 中添加 direction: rtl;，则 word-wrap 和 word-break 样式将不起作用。我们如何在纯 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>