Monday, August 11, 2003

Overflow PRE tag (HTML & CSS)

Text doesn't wrap with the <pre> tag, so you need to scroll horizontally if there is a lot of text on one line:
Nulla neque diam, accumsan nec, egestas non, facilisis sed, wisi.    Donec lacinia vestibulum arcu. Suspendisse ligula. Donec tortor. Maecenas pharetra eros at odio.
	Morbi feugiat tempus orci. Cras vitae tellus. Sed congue nonummy magna. In sed neque id nisl tempus congue.
Duis varius egestas tellus. Suspendisse potenti. Nunc rhoncus, eros eget malesuada rhoncus, mi purus pharetra eros, sit amet porta lectus tortor ac erat.
In hac habitasse platea dictumst.
However, if you wrap it as follows <pre style="overflow: auto; width: 100%">Text</pre> it adds scroll bars when needed:
Nulla neque diam, accumsan nec, egestas non, facilisis sed, wisi.    Donec lacinia vestibulum arcu. Suspendisse ligula. Donec tortor. Maecenas pharetra eros at odio.
	Morbi feugiat tempus orci. Cras vitae tellus. Sed congue nonummy magna. In sed neque id nisl tempus congue.
Duis varius egestas tellus. Suspendisse potenti. Nunc rhoncus, eros eget malesuada rhoncus, mi purus pharetra eros, sit amet porta lectus tortor ac erat.
In hac habitasse platea dictumst.
width and overflow has to be defined, else it will not work. It also does not work particulary well when there are not many lines of text (scroll bars get in the way [at least 3 line breaks recommended]):
Nulla neque diam, accumsan nec, egestas non, facilisis sed, wisi.    Donec lacinia vestibulum arcu. Suspendisse ligula. Donec tortor. Maecenas pharetra eros at odio.

No comments: