这篇文字给大家分享几个有意思的 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;
}

兼容

交换群