WEB前端开发

今天射雕在前端扑通做了一个测试：如何将一个字符串反转？比如 abcd => dcba。可以使用任何现有的前端知识。

同时我也把这个问题转到了js森林群里。

比如这么一个字符串：“愚人码头是css88.com的博主。”反转后应给是：“。主博的moc.88ssc是头码人愚”。

我的第一个反应也是使用js解决:

<div id="test">愚人码头是css88.com的博主。</div>

var testString = document.getElementById("test").innerHTML;
testString=testString.split("").reverse().join("");
document.getElementById("test").innerHTML=testString;

这种回答被射雕评定为“最没创意的答案！”。

js森林的朋友，丸子，PRcss，小志等提出了css的解决办法，就是这两个非常少用的css属性：direction:rtl; unicode-bidi:bidi-override。

<div style=" direction:rtl; unicode-bidi:bidi-override">愚人码头是css88.com的博主。</div>

这里有个一个瑕疵，就是文本右对齐了，但是还是符合题目答案的。

解决上面这个瑕疵可以使用float:left这个属性，但是又多了一个浮动。

哎，脑子犯傻了，谢谢船长提醒在留言中的提醒，光使用direction:rtl; unicode-bidi:bidi-override文本是右对齐的，使用text-align:left就能将文本左对齐。

还有一个问题：在文本超过一行显示的时候，js的方法和css的方法显示是不一样的。查看demo：http://www.css88.com/demo/overturn/overturn.html

至于direction和unicode-bidi极其属性值大家可以看看css手册。我也会去再恳一边css手册，不要等css3来了，css2有多少属性还不知道。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《如何将一个字符串反转》