Horizontal scrolling and you

When it comes to HTML, CSS, and graphical formatting, I feel like a daft noob.

Even achieving the most basic formatting seems to take longer than it should. Giving up on reasonable compromises is often more appealing to me than figuring out the right way to achieve the goal.

Anyway, tonight I am overjoyed! I wanted to have a <pre> block, with code that:

  • had an horizontal scroll bar.
  • but only when there are lines too long.
  • and well, long lines did not wrap.

I first fidgeted with the white-space property in the attribute, which has a nowrap value, and various other ones. None of them seemed to do what I wanted, the only valid value to preserve white spacing was pre.

overflow-x: auto was easy to find. It would do the right thing except... the text was wrapping, so the scroll bar never showed up.

It took me a while to discover that a word-wrap: normal would do exactly what I wanted.

So, here is the final CSS:

pre {
  word-wrap: normal;
  overflow-x: auto;
  white-space: pre;
}

And here is what it looks like rendered:

This is a really really really really really really really really really really really really really really really really really really really really really really really long line

It's amazing how happiness at times can come from very little things.


Other posts

  • From PDF to interactive map Let's say you are thinking about moving to Rome in the near future. Let's say you have family, and you want to find all daycares within 30 mins by pu...
  • Using CLANG to generate HTML files Did you know that you can generate nicely formatted HTML file from your source code with clang ? I just noticed this by peeking in the source code, t...
  • SSL Certificates, Debian, and Java Recently, I tried to run a Java application on my Debian workstation that needed to establish SSL / HTTPs connections. But... as soon as a connection...
  • Flying with babies, how we survived A bit more than a year ago I became the proud parent of the cutest little girl in the world. By living abroad and traveling often, the little one had...
  • Getting started with VoIP I have been living in different countries for the last 10 years. Although I can get in touch with friends and family using gtalk, skype, or you name i...
Show all...