[問題] 超過固定高度隱藏文字

[uorol (′‧ω‧‵)]

Dear all

想要請教是否有用Java script或者CSS,
將超出固定高度之後的文字隱藏?

因為網頁的background想放一張螢幕的圖,
捲動的時候讓文字超過螢幕之後隱藏.
但是用了幾個CSS的語法都是靜態的隱藏 QQ
可以提示小弟一些關鍵字嗎?

┌——————————————————————————┐
│ Web background                                     │
│                                                    │
│       ┌—————————————┬┐             │
│       │ Text content             ││             │
│       │                          ││             │
│       │                          ││             │
│       │                          ││             │
│       │                          ││             │
│       │                          ││             │
│       └—————————————┴┘             │
│                                                    │
│                                                    │
└——————————————————————————┘

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.23.125.115 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1574766621.A.683.html
→ wayway2004: overflow: hidden;
→ uorol: 樓上那個關鍵字我試過會在還沒捲動時就被隱藏
→ uorol: 還是有沒有推薦的組合方式...?
→ uorol: 另外我試過用JS去註冊onScroll listen, 再去計算高度
→ uorol: 這樣可以動態的hidden widget...
→ uorol: 不過如果要做到單行, 就得把每一行都加上單獨的CSS class
→ uorol: 另外就是圖片似乎沒辦法用這種方式處理 (哭
推 arthur104: 不是很理解要幹嘛orz
推 ymcheung: 把問題放在 codepen 看看？
→ uorol: 嗯...簡單來說我的背景會是一個電腦螢幕
→ uorol: 當捲動的時候, 文字向上捲動的時候想要限定只在那個區塊裡
→ uorol: codepen嗎? 我來研究看看 ._.)y
→ foolray: 目前看起來 會不會轉個想法 背景是文字 上面蓋圖 條整高
→ foolray: 度讓文字露出？
→ jhnny97: 你知道不同的DOM可以設置各自的overflow style嗎？
推 wayway2004: 感覺螢幕框圖片覆蓋在文字上會快一點
推 wayway2004: css clip-path 也能辦到
→ uorol: 感謝樓上幾位的意見 <(_ _)> 小弟來研究研究
→ uorol: 專職是BSP, 基本上沒有碰過網頁全部都土法煉鋼 (汗
→ uorol: 這是目前用JS弄出來的效果, https://imgur.com/3Etw8eF
推 chanchanbear: 試試看overflow-y:scroll呢？
→ jhnny97: 原來你是要這樣子啊，查 position absolute、z-index 吧
推 sjlxup6: https://codepen.io/sjlxup6/pen/yLyBgdp 簡單拉一下
→ sjlxup6: 解法很多，但多半都會用position定位的方式來解
→ sjlxup6: 和overflow的用法不太一樣，position要注意父子關係