CSS幾個有趣的屬性分享

JenK發表於2021-11-18

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

相關文章