你如何使div剪辑成为可见内容？

Question

你如何使div剪辑成为可见内容？

use*_*753 10 html css3

例如,如下图所示.你有内容跨越整个页面,但你想div"窗口"只显示它的一部分？我尝试制作两个div,一个是内部,另一个是外部.

内部的位置是固定的(因此基于浏览器)并跨越整个页面,而外部是绝对的并且位于红色矩形所在的位置.然后我将内部(带有页面内容)放在外部div中,但根本不起作用

我也尝试过使用负填充,但这是不允许的

裁剪div的例子

Answer 1

Jay*_*Jay 11

使用overflow,overflow-y或overflow-x使用特定width或样式height.

如果您只想隐藏大量内容,请使用overflow:hidden.如果您还想显示滚动条,请使用overflow:scroll.

使用overflow-x隐藏其宽度超过容器宽度的内容.使用overflow-y隐藏其高度超过容器高度的内容.使用overflow隐藏其宽度和高度超过容器的宽度和高度的内容.

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，10 月前
查看次数：	14682 次
最近记录：	7 年，2 月前