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>
运行结果:
解决方法一:
在文本的末尾添加’‎’(十六进制编码为200E的字符,htmll可以使用&#字符编码, x表示编码值是用十六进制表示)
<div class="container">Hello, World!‎</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样式导致下拉框中的括号显示异常