Search the Site


bottom corner

Creating a PRE text area with scroll bar

The PRE tag in HTML is useful when you need to control exactly how text appears, both with spacing, line breaks, etc., but it sometimes has peculiarities with Internet Explorer if at least one of the lines is longer than the width of the parent DIV. This note shows how I get around it by creating overflow scroll bars with CSS.

This page is filed under keyword(s): css.

I actually had this issue on for a little while. To get around it, I changed the style class for code so it looks like the following:

pre.code {
	overflow: auto; 
	overflow-y: visible;

With this, when encountered with a long line of code, a horizontal scroll bar will appear to allow the user to scroll left and right instead of breaking the width and sometimes positioning of the parent DIV. Below is a demo of this CSS style.

BufferedWriter out = new BufferedWriter(new FileWriter("/folder/anotherFolder/thirdFolder/anotherFolderToMakeThisLineLong/file.txt"));

Did you find this page useful? Please consider browsing other articles or subscribing to the RSS feed to keep up with latest.

This page is filed under keyword(s): css.
Author: C. Peter Chen
Last updated: 30 Jul 2008

bottom corner