不過這個功能的體驗，感覺就是閃一下，就跳到要顯示的位置上，感覺並不怎麼好，所以這時候就可以使用 CSS 屬性 scroll-behavior 來達到平滑移動的效果啦。

// scroll-behavior

html {
    scroll-behavior: smooth
}

不過此 scroll-behavior CSS 屬性好像並不支援 safari 瀏覽器，所以如果也想要支援 safari 瀏覽器的朋友們，可能就要換另外一種方法了。

參考連結：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-behavior

但卻懶到什麼都叫art來做，造成art很討厭工程師 XDDD !

CSS的 transform 屬性可以讓網頁元素變形，呈現多種的特殊效果，其中之一便是旋轉效果，可以自由設定元素順時針或逆時針旋轉幾度。

div{
  background:#4d4d4d;
  color:#fff;
  width:150px;height:30px;padding:15px;
  text-align:center;
  -moz-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -o-transform:rotate(5deg);
  -ms-transform:rotate(5deg);
  transform:rotate(5deg);
}

幾行簡單的程式碼就搞定，也可以不用讓art，還要開photoshop 調整角度，等等差一度又要再重新出圖。

Reference

https://www.webdesigns.com.tw/css_rotate.asp

此篇可以配合CSS「text-overflow: ellipsis;」屬性限制內容字數，顯示「…」應用，

CSS 文字換行的 style 為 word-wrap ，透過這個屬性可以指定換行的方式，並可以強制文字不換行。

而 CSS 還有個空白長度的設定，透過 white-space 可以移除連續空白。

• word-break: break-all; 文字強迫換行，太長的英文字，會自動切成兩半。若一個單字過長，超過畫面的寬度，則將單字切斷，並換行。
• word-wrap:break-word; 文字自動換行，長英文字不切斷，若一個單字過長，超過畫面的寬度，則將單字換行(不切斷單字)。不切斷英字單字對於一般的讀者是比較好懂的，唯一的缺點是右邊會出現很大的一塊空白。
• white-space:pre; 保留原始資料的空白與換行，功能與 HTML tag 中的 ＜pre> 相同。
• white-space:nowrap; 強迫文字不換行，移除連續空白，移除換行符號(n r)， 強迫文字不換行。
• white-space:pre-wrap; 保留所有空白，自動換行。
• white-space: pre-line; 連續空白，取代成一個空白。這個語法可以會自動將多個空白轉換成一個空白。

所以可以透過CSS Style來解決初步的問題，

在<p></p>的部分，不希望因為過多文字換行可以使用此方式:

p {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

原文字的內容當過多時，就不換行改為「…」。

另一種方式直接使用js對文字做過多處理為「…」

// 以React function為示範, 將要換的內容值放入做取代
renderContentLimit(p){
    const len = 50; // 超過50個字以"..."取代
    console.log(p.length);
    if(p.length>len){
        const final=p.substring(0,len-1)+"...";
        return final
    }
    else{
        return p
    }

}

Reference

https://www.astralweb.com.tw/css-ellipsis/

所以做了一些 CSS scroll bar 的屬性的測試，這邊做一下記錄。

// 滑動時，才會顯示。
.test {
overflow: scroll;
}

// 不滑動時，如果內容長度有超過限制的高度，也會顯示。
.test {
overflow: auto;
}

不過這邊值得注意的一點是， windows 系統跟 mac 不太一樣，上面的設定在 window 執行的很順利，在 mac 上，還需要做一些額外的設定，才可以達到不滑動時，也出  scroll bar 的效果。

# mac 設定

# 系統偏好設定 -> 一般 -> 顯示捲軸 -> 勾選 (總是)

# 完成以上設定就可以了。