How do you make a div clip its visible content?

Use overflow, overflow-y, or overflow-x style with a specific width or height.

If you want to simply hide large content, use overflow:hidden. If you want to also show the scroll bar, use overflow:scroll.

Use overflow-x to hide content whose width exceeds the container width. Use overflow-y to hide content whose height exceeds the container height. Use overflow to hide content whose width & height exceeds the container width & height.

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


.panel {
    width:300px;
    height:400px;
    overflow:auto;
}

overflow:auto will show a scroll bar when it is necessary, but not unless its necessary.

Tags:

Html

Css

Recent Posts