文字方向
writing-mode | direction | unicode-bidi
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 250px; } p.rtl { direction: rtl; } p.rtlTxt { width: 335px; direction: rtl; unicode-bidi: bidi-override; } div { display: inline-block; width: 60px; height: 150px; border: 1px solid #8f9d4c; } .vertical-lr { writing-mode: vertical-lr; } .vertical-rl { writing-mode: vertical-rl; } </style> </head> <body> <h4>Try your best. Just do what you want to do.</h4> <p>Try your best. Just do what you want to do.</p> <p class="rtl">Try your best. Just do what you want to do.</p> <p class="rtlTxt">Try your best. Just do what you want to do.</p> <div class="vertical-lr">CSS世界有很多有趣而又好玩的内容</div> <div class="vertical-rl">CSS世界有很多有趣而又好玩的内容</div> </body> </html>