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

作者: uorol (′‧ω‧‵)   2019-11-26 19:10:18
Dear all
想要請教是否有用Java script或者CSS,
將超出固定高度之後的文字隱藏?
因為網頁的background想放一張螢幕的圖,
捲動的時候讓文字超過螢幕之後隱藏.
但是用了幾個CSS的語法都是靜態的隱藏 QQ
可以提示小弟一些關鍵字嗎?
┌——————————————————————————┐
│ Web background │
│ │
│ ┌—————————————┬┐ │
│ │ Text content ││ │
│ │ ││ │
│ │ ││ │
│ │ ││ │
│ │ ││ │
│ │ ││ │
│ └—————————————┴┘ │
│ │
│ │
└——————————————————————————┘
作者: wayway2004 (暐暐)   2019-11-26 19:49:00
overflow: hidden;
作者: uorol (′‧ω‧‵)   2019-11-26 21:03:00
樓上那個關鍵字我試過會在還沒捲動時就被隱藏還是有沒有推薦的組合方式...?另外我試過用JS去註冊onScroll listen, 再去計算高度這樣可以動態的hidden widget...不過如果要做到單行, 就得把每一行都加上單獨的CSS class另外就是圖片似乎沒辦法用這種方式處理 (哭
作者: arthur104 (arthur)   2019-11-26 22:06:00
不是很理解要幹嘛orz
作者: ymcheung (ymc)   2019-11-26 22:21:00
把問題放在 codepen 看看?
作者: uorol (′‧ω‧‵)   2019-11-26 22:34:00
嗯...簡單來說我的背景會是一個電腦螢幕當捲動的時候, 文字向上捲動的時候想要限定只在那個區塊裡codepen嗎? 我來研究看看 ._.)y
作者: foolray (foolray)   2019-11-26 23:33:00
目前看起來 會不會轉個想法 背景是文字 上面蓋圖 條整高度讓文字露出?
作者: jhnny97 (≡(  ゚Д゚))   2019-11-26 23:46:00
你知道不同的DOM可以設置各自的overflow style嗎?
作者: wayway2004 (暐暐)   2019-11-27 00:09:00
感覺螢幕框圖片覆蓋在文字上會快一點css clip-path 也能辦到
作者: uorol (′‧ω‧‵)   2019-11-27 10:37:00
感謝樓上幾位的意見 <(_ _)> 小弟來研究研究專職是BSP, 基本上沒有碰過網頁全部都土法煉鋼 (汗這是目前用JS弄出來的效果, https://imgur.com/3Etw8eF
作者: chanchanbear (錢錢熊)   2019-11-27 12:28:00
試試看overflow-y:scroll呢?
作者: jhnny97 (≡(  ゚Д゚))   2019-11-27 18:48:00
原來你是要這樣子啊,查 position absolute、z-index 吧
作者: sjlxup6 (遠遠的)   2019-11-30 07:53:00
https://codepen.io/sjlxup6/pen/yLyBgdp 簡單拉一下解法很多,但多半都會用position定位的方式來解和overflow的用法不太一樣,position要注意父子關係

Links booklink

Contact Us: admin [ a t ] ucptt.com