css|direction: rtl；填坑

最新推荐文章于 2024-08-10 07:49:15 发布

Rich_1i3ha

最新推荐文章于 2024-08-10 07:49:15 发布

阅读量4.4k

点赞数 4

分类专栏： css

本文链接：https://blog.csdn.net/qq_41555989/article/details/115028360

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

direction: rtl;填坑

direction: rtl;造成的问题是特殊符号结尾会显示在文本的最左边。

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

运行结果：
在这里插入图片描述
解决方法一：
在文本的末尾添加’&#x200E’（十六进制编码为200E的字符，htmll可以使用&#字符编码， x表示编码值是用十六进制表示）

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

运行结果：
在这里插入图片描述
解决方法二：
使用行内元素（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>

运行结果：
在这里插入图片描述
参考链接：
direction: rtl样式导致下拉框中的括号显示异常

Rich_1i3ha

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
css|direction: rtl；填坑

direction: rtl;填坑direction: rtl;造成的问题是特殊符号结尾会显示在文本的最左边。<html> <head> <style type="text/css"> div.container { direction: rtl; } </style> </head> <body> <div class="container
复制链接

扫一扫

专栏目录