作者uorol (′‧ω‧‵)
看板Web_Design
標題[問題] 超過固定高度隱藏文字
時間Tue Nov 26 19:10:18 2019
Dear all
想要請教是否有用Java script或者CSS,
將超出固定高度之後的文字隱藏?
因為網頁的background想放一張螢幕的圖,
捲動的時候讓文字超過螢幕之後隱藏.
但是用了幾個CSS的語法都是靜態的隱藏 QQ
可以提示小弟一些關鍵字嗎?
┌——————————————————————————┐
│ Web background │
│ │
│ ┌—————————————┬┐ │
│ │ Text content ││ │
│ │ ││ │
│ │ ││ │
│ │ ││ │
│ │ ││ │
│ │ ││ │
│ └—————————————┴┘ │
│ │
│ │
└——————————————————————————┘
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 211.23.125.115 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1574766621.A.683.html
1F：→ wayway2004: overflow: hidden; 11/26 19:49
2F：→ uorol: 樓上那個關鍵字我試過會在還沒捲動時就被隱藏 11/26 21:03
3F：→ uorol: 還是有沒有推薦的組合方式...? 11/26 21:03
4F：→ uorol: 另外我試過用JS去註冊onScroll listen, 再去計算高度 11/26 21:04
5F：→ uorol: 這樣可以動態的hidden widget... 11/26 21:04
6F：→ uorol: 不過如果要做到單行, 就得把每一行都加上單獨的CSS class 11/26 21:05
7F：→ uorol: 另外就是圖片似乎沒辦法用這種方式處理 (哭 11/26 21:05
8F：推 arthur104: 不是很理解要幹嘛orz 11/26 22:06
9F：推 ymcheung: 把問題放在 codepen 看看？ 11/26 22:21
10F：→ uorol: 嗯...簡單來說我的背景會是一個電腦螢幕 11/26 22:34
11F：→ uorol: 當捲動的時候, 文字向上捲動的時候想要限定只在那個區塊裡 11/26 22:35
12F：→ uorol: codepen嗎? 我來研究看看 ._.)y 11/26 22:36
13F：→ foolray: 目前看起來 會不會轉個想法 背景是文字 上面蓋圖 條整高 11/26 23:33
14F：→ foolray: 度讓文字露出？ 11/26 23:33
15F：→ jhnny97: 你知道不同的DOM可以設置各自的overflow style嗎？ 11/26 23:46
16F：推 wayway2004: 感覺螢幕框圖片覆蓋在文字上會快一點 11/27 00:09
17F：推 wayway2004: css clip-path 也能辦到 11/27 09:51
18F：→ uorol: 感謝樓上幾位的意見 <(_ _)> 小弟來研究研究 11/27 10:37
19F：→ uorol: 專職是BSP, 基本上沒有碰過網頁全部都土法煉鋼 (汗 11/27 10:37
21F：推 chanchanbear: 試試看overflow-y:scroll呢？ 11/27 12:28
22F：→ jhnny97: 原來你是要這樣子啊，查 position absolute、z-index 吧 11/27 18:48
24F：→ sjlxup6: 解法很多，但多半都會用position定位的方式來解 11/30 07:55
25F：→ sjlxup6: 和overflow的用法不太一樣，position要注意父子關係 11/30 07:56