css实现文字从右向左排列

Riverse

于 2021-09-20 20:44:03 发布

阅读量5.1k

点赞数 1

分类专栏： vue前端文章标签： css html html5

原文链接：https://blog.youkuaiyun.com/qq_41555989/article/details/115028360

版权

vue前端专栏收录该内容

24 篇文章

订阅专栏

在css样式中加入：direction: rtl ，即可让文字从右向左排列，但此时符号的排列位置不正确，会显示在文本的最左边。

如：hello，world！会变成：！hello，world

解决方式

1、在文本的末尾加入特殊符号 “ &#x200E ”

<div class="container">Hello, World!&#x200E;</div>

2、使用行内元素（span）包裹着文本，并且为内联元素设置样式：{ direction: ltr; unicode-bidi: bidi-override; }

<html>
  <head>
    <style type="text/css">
      div.container
      {
      	direction: rtl;
      }
      .text {
      	direction: ltr;
        unicode-bidi: bidi-override;
      }
    </style>
  </head>
  <body>
    <div class="container">
     <span class="text">Hello, World!</span>
    </div>
  </body>
</html>

原文链接：

https://blog.youkuaiyun.com/qq_41555989/article/details/115028360