13
头图

这篇文字给大家分享几个有意思的css属性
direction
unicode-bidi
writing-mode
text-orientation

按钮或者文本左右顺序置换

置换按钮位置

image.png
常规做法:

  • HTML元素换个位置
  • float:right,那还要居中呢?
  • js置换dom顺序
  • CSScss可以吗?可以!

关键属性direction

CSS属性 direction 用来设置文本、表列水平溢出的方向。 rtl 表示从右到左 (类似希伯来语或阿拉伯语), ltr 表示从左到右 (类似英语等大部分语言).

我们用这个属性来改变按钮的排列方向即可,真是方便呀🤙🤙🤙
image.png
在线示例

<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;
}

兼容
image.png

翻转文字

image.png
常规做法:

  • js str.split('').reverse().join('')
  • CSScss可以吗?可以!

direction 属性似乎只能改变图片或者按钮的呈现顺序,但对纯字符内容(中文)好像并没有什么效果,我们可以借助 direction 的搭档属性unicode-bidi属性来决定如何处理文档中的双书写方向文本
在线示例

<div class="text">我是被翻转的文字</div>
.text{
  direction:rtl;
  unicode-bidi:bidi-override;
  text-align:left
}

兼容
image.png

文本垂直或者90°旋转

image.png
常规做法:

  • CSS3 rotate(90deg),不怎么好用,还要调整位置
  • 或者试试下面这个👇

用到的css属性
writing-mode定义了文本水平或垂直排布以及在块级元素中文本的行进方向
text-orientation设定行中字符的方向
在线示例

文本竖向布局

image.png

<span class='mixed'>中国人不骗中国人🇨🇳</span>
.mixed{
 writing-mode: vertical-lr;
}

文本竖向布局,文字旋转90°

image.png

<span class='sideways'>中国人不骗中国人🇨🇳</span>
.sideways{
 writing-mode: vertical-lr;
 text-orientation: sideways-right;
}

兼容
image.png

image.png

交流群

WX20210922-091703.png


雾岛听风
11.9k 声望8.6k 粉丝

丰富自己,胜过取悦别人。