如果我们在 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 分词符会改变
最佳答案
它似乎工作正常,下面是运行代码和附加的屏幕截图。
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>
关于CSS 方向样式无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41332021/