Docs99

Appearance

Return to top
On this page

特殊實用功能

垂直文字

Default Text
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
Vertical Text
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

writing-mode MDN

css
.vertical-text {
  writing-mode: vertical-lr;
}
  • vertical-lr 垂直靠左
  • vertical-rl 垂直靠右

鏡像圖片

scale-img
scale-img

transform MDN

css
img {
  transform: scaleX(-1);
}

滾動吸附 / 全頁滾動

section1
section2
section3
section4

1️⃣ 容器內滾動吸附方式 scroll-snap-type

設置在父層

css
.container {
  scroll-snap-type: x mandatory; /* 水平「強制吸附」 */
  scroll-snap-type: x proximity; /* 水平「靠近吸附」 */
  overflow: auto; /* 必須 */

  scroll-behavior: smooth; /* 滾動平滑 */
}

2️⃣ 子層 對齊容器方式 scroll-snap-align

滾動項目

css
.section {
  scroll-snap-align: start; /* 對齊在起始點 */
  scroll-snap-align: end; /* 對齊在終點 */
  scroll-snap-align: center; /* 元素中間對齊 */
}

滾動模式 scroll-behavior

設置在容器上，在當滾動時執行。

css
.container {
  scroll-behavior: smooth; // 滾動平滑
}
Reference

文本溢出省略

Default Text
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the
Default Text
orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the

文字區塊

css
.content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
  • -webkit-line-clamp 顯示幾行
  • overflow: hidden; 超出隱藏
Reference

Reference