HTML – 如何使div剪辑成为可见内容?
发布时间:2020-12-14 18:33:32 所属栏目:资源 来源:网络整理
导读:例如,如下图所示.你有内容跨越整个页面,但你想div“窗口”只显示它的一部分?我尝试制作两个div,一个是内部,一个是外部. 内部将其位置固定(因此基于浏览器)并跨越整个页面,而外部是绝对的并且位于红色矩形所在的位置.然后我将内部(带有页面内容)放在外部div
例如,如下图所示.你有内容跨越整个页面,但你想div“窗口”只显示它的一部分?我尝试制作两个div,一个是内部,一个是外部.
内部将其位置固定(因此基于浏览器)并跨越整个页面,而外部是绝对的并且位于红色矩形所在的位置.然后我将内部(带有页面内容)放在外部div中,但根本不起作用 我也尝试过使用负填充,但这是不允许的 cropped div example 解决方法
使用具有特定宽度或高度的overflow,overflow-y或overflow-x样式.
如果您只想隐藏大型内容,请使用overflow:hidden.如果还要显示滚动条,请使用overflow:scroll. 使用overflow-x隐藏宽度超过容器宽度的内容.使用overflow-y隐藏高度超过容器高度的内容.使用溢出来隐藏宽度和宽度的内容.高度超过容器宽度&高度. <HTML> <BODY> <DIV STYLE="width:20ex; overflow-x:scroll; border:1px solid black;"> <NOBR>very long text very long text very long text very long text very long text</NOBR> </DIV> <BR /> <DIV STYLE="height:3em; overflow-y:scroll; border:1px solid black;"> line 1<BR /> line 2<BR /> line 3<BR /> line 4<BR /> line 5<BR /> line 6 </DIV> <BR /> <DIV STYLE="width:20ex; height:3em; overflow:scroll; border:1px solid black;"> <NOBR>very long text very long text very long text very long text very long text</NOBR> line 1<BR /> line 2<BR /> line 3<BR /> line 4<BR /> line 5<BR /> line 6 </DIV> <BR /> <DIV STYLE="width:20ex; height:3em; overflow:hidden; border:1px solid black;"> <NOBR>very long text very long text very long text very long text very long text</NOBR> line 1<BR /> line 2<BR /> line 3<BR /> line 4<BR /> line 5<BR /> line 6 </DIV> </BODY> </HTML> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容