这篇文字给大家分享几个有意思的css属性
direction
unicode-bidi
writing-mode
text-orientation
按钮或者文本左右程序置换
置换按钮地位
惯例做法：
- HTML元素换个地位
float:right,那还要居中呢？js置换dom程序CSS，css能够吗？能够！
要害属性direction
CSS属性direction用来设置文本、表列程度溢出的方向。rtl示意从右到左 (相似希伯来语或阿拉伯语)，ltr示意从左到右 (相似英语等大部分语言).
咱们用这个属性来扭转按钮的排列方向即可，真是不便呀
在线示例
<div class='wrap wrap-rtl'> <button class="button">勾销</button> <button class="button button-primary">确认</button></div>.wrap { width: 200px; text-align: center;}.wrap-rtl { direction: rtl;}兼容
翻转文字
惯例做法：
- js
str.split('').reverse().join('') CSS，css能够吗？能够！
direction 属性仿佛只能扭转图片或者按钮的出现程序，但对纯字符内容（中文）如同并没有什么成果，咱们能够借助 direction 的搭档属性unicode-bidi属性来决定如何解决文档中的双书写方向文本
在线示例
<div class="text">我是被翻转的文字</div>.text{ direction:rtl; unicode-bidi:bidi-override; text-align:left}兼容
文本垂直或者90°旋转
惯例做法：
- CSS3
rotate(90deg),不怎么好用，还要调整地位 - 或者试试上面这个
用到的css属性
writing-mode定义了文本程度或垂直排布以及在块级元素中文本的前进方向
text-orientation设定行中字符的方向
在线示例
文本竖向布局
<span class='mixed'>中国人不骗中国人</span>.mixed{ writing-mode: vertical-lr;}文本竖向布局，文字旋转90°
<span class='sideways'>中国人不骗中国人</span>.sideways{ writing-mode: vertical-lr; text-orientation: sideways-right;}兼容