这篇文字给大家分享几个有意思的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;
}
兼容
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。