携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情

CSS 几个有趣的属性分享

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

兼容