這篇文字給大家分享幾個有意思的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;
}

相容

交流群