PTT數位生活區 / Web_Design

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

看板Web_Design作者 (′‧ω‧‵)時間5年前 (2019/11/26 19:10), 編輯推噓6(6推 0噓 19→)
留言25則, 8人參與, 5年前最新討論串1/1
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
→
11/26 19:49, 5年前 , 1F
overflow: hidden;
11/26 19:49, 1F
→
11/26 21:03, 5年前 , 2F
樓上那個關鍵字我試過會在還沒捲動時就被隱藏
11/26 21:03, 2F
→
11/26 21:03, 5年前 , 3F
還是有沒有推薦的組合方式...?
11/26 21:03, 3F
→
11/26 21:04, 5年前 , 4F
另外我試過用JS去註冊onScroll listen, 再去計算高度
11/26 21:04, 4F
→
11/26 21:04, 5年前 , 5F
這樣可以動態的hidden widget...
11/26 21:04, 5F
→
11/26 21:05, 5年前 , 6F
不過如果要做到單行, 就得把每一行都加上單獨的CSS class
11/26 21:05, 6F
→
11/26 21:05, 5年前 , 7F
另外就是圖片似乎沒辦法用這種方式處理 (哭
11/26 21:05, 7F
推
11/26 22:06, 5年前 , 8F
不是很理解要幹嘛orz
11/26 22:06, 8F
推
11/26 22:21, 5年前 , 9F
把問題放在 codepen 看看？
11/26 22:21, 9F
→
11/26 22:34, 5年前 , 10F
嗯...簡單來說我的背景會是一個電腦螢幕
11/26 22:34, 10F
→
11/26 22:35, 5年前 , 11F
當捲動的時候, 文字向上捲動的時候想要限定只在那個區塊裡
11/26 22:35, 11F
→
11/26 22:36, 5年前 , 12F
codepen嗎? 我來研究看看 ._.)y
11/26 22:36, 12F
→
11/26 23:33, 5年前 , 13F
目前看起來 會不會轉個想法 背景是文字 上面蓋圖 條整高
11/26 23:33, 13F
→
11/26 23:33, 5年前 , 14F
度讓文字露出？
11/26 23:33, 14F
→
11/26 23:46, 5年前 , 15F
你知道不同的DOM可以設置各自的overflow style嗎？
11/26 23:46, 15F
推
11/27 00:09, 5年前 , 16F
感覺螢幕框圖片覆蓋在文字上會快一點
11/27 00:09, 16F
推
11/27 09:51, 5年前 , 17F
css clip-path 也能辦到
11/27 09:51, 17F
→
11/27 10:37, 5年前 , 18F
感謝樓上幾位的意見 <(_ _)> 小弟來研究研究
11/27 10:37, 18F
→
11/27 10:37, 5年前 , 19F
專職是BSP, 基本上沒有碰過網頁全部都土法煉鋼 (汗
11/27 10:37, 19F
→
11/27 10:40, 5年前 , 20F
這是目前用JS弄出來的效果, https://imgur.com/3Etw8eF
11/27 10:40, 20F
推
11/27 12:28, 5年前 , 21F
試試看overflow-y:scroll呢？
11/27 12:28, 21F
→
11/27 18:48, 5年前 , 22F
原來你是要這樣子啊，查 position absolute、z-index 吧
11/27 18:48, 22F
推
11/30 07:53, 5年前 , 23F
11/30 07:53, 23F
→
11/30 07:55, 5年前 , 24F
解法很多，但多半都會用position定位的方式來解
11/30 07:55, 24F
→
11/30 07:56, 5年前 , 25F
和overflow的用法不太一樣，position要注意父子關係
11/30 07:56, 25F
‣ 更多 uorol 的文章
文章代碼(AID): #1TtGWTQ3 (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 uorol 的文章
文章代碼(AID): #1TtGWTQ3 (Web_Design)