logo标签列表

从右到左的显示样式下，括号显示错误。

htmlgoogle-chromeright-to-left
37

这段HTML代码

<html dir="rtl">
<p>hello (world)</p>
</html>

您将看到这样的页面：

(hello (world

然而，如果我将HTML代码更改为

<html dir="rtl">
<p>hello (world) again</p>
</html>

然后文本会正常显示：

 hello (world) again

有人能解释一下为什么会发生这种情况吗？如何修复第一个示例？

我的浏览器是Chrome。

这个有点难...很抱歉我没有解决方案，但是如果想要了解在改变阅读方向时可能出现的许多问题的非常好的概述，我可以推荐这个链接：http://www.w3.org/International/tutorials/bidi-xhtml/ - ezmilhouse
可能是为什么"[x]y"在RTL方向上显示不正确？的重复问题。 - Roddy of the Frozen Peas
6个回答
46

你只需要在最后一个括号后面加上LRM字符。HTML实体：&#x200E;

<html dir="rtl">
<body>
<p>hello (world)&#x200E;</p>
</body></html>

这告诉浏览器把方括号解释为从左到右的阅读方式。

1
欢迎来到Stack Overflow！在发布复制粘贴的样板/原样回答到多个问题（https://dev59.com/x2025IYBdhLWcg3wyJCV#7931735）时要小心，这些回答容易被社区标记为“垃圾信息”。 - Kev
5
当我看到一个答案时，我并不真的期望它是由用户手写的。很多时候这甚至不实际（虽然提供一个反向链接可能有助于进一步了解）。在使用这个技巧时，我在Chrome开发人员工具中发现了一个不错的简写“‎”——更易记忆... - Fabio Milheiro
2
我一直在寻找这个解决方案。&#x200E; 很适合我。谢谢 :) - Kushal Jayswal
@freeworlder，这个在“input”标签中使用“placeholder”属性是不起作用的。 - Maulik patel
有人能解释一下为什么会发生这种情况吗？ - Karma
17

或者更好的是您可以尝试使用CSS

*:after {
    content: "\200E‎";
}
1
这对我来说没有任何作用。括号仍然是错误的，但它在随处插入了随机间隔。 - Nick
没问题，在这里可以工作，我会确保样式确实应用到你的元素上。 - chrismarx
@Adrian，使用“input”标签中的“placeholder”属性无法正常工作。 - Maulik patel
6
在CSS中在元素的前后添加特殊的rlm字符可以解决我在Firefox和Chrome中遇到的所有情况：
*:after {
    content: "\200E‎";
}
*:before {
    content: "\200E‎";
}
就是这样！谢谢！ - adripanico
3

在(前使用&rlm;。 例如：

<html dir="rtl">
<body>
<p>hello &rlm;(world)</p>
</body></html>

如果您正在使用JavaScript / SVG DOM，则

 aText = $('<span>').html(aText.replace("(","&rlm;(")).text();
 $("<p>").html(aText);

对于其他特殊字符

function getRTLText(aText,aChar) {
        if ( aText != undefined && aText.replace){
            aChar = (aChar === undefined )?"(":aChar;
            aText = $('<span>').html(aText.replace(aChar,"&rlm;"+aChar)).text();
        }
        return aText;
}

并调用函数

getRTLText("三月 / 2018","/");

2
-1
如果在WordPress中遇到此问题，您可以尝试以下修复方法：

https://gist.github.com/dtbaker/b532e0e84a8cb7f22f26

function dtbaker_rtl_bracket_hack($content){
    if(is_rtl()){
        $content = preg_replace('#<p>([^<]+)\)\s*</p>#','<p>$1)&#x200E;</p>',$content);
        $content = preg_replace('#<p>\s*\(([^<]+)</p>#','<p>&#x200E;($1</p>',$content);
    }
    return $content;
}
add_filter('the_content','dtbaker_rtl_bracket_hack',100,1);
用大锤砸小坚果。 - adripanico
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接