[问题] 超过固定高度隐藏文字

楼主: 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