One cool feature on my blog is the codebox where I can insert snippets of HTML
, CSS
, and Javascript
codes.
Here's an example of how my CSS code looks:
.post blockquote {
background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tricks/Images/blockquote.png");
background-position: 0 0;
background-repeat: no-repeat repeat;
border-color: #DDDDDD #666666 #666666 #DDDDDD;
border-radius: 6px;
border-style: solid;
border-width: 1px;
color: #000000;
font-family: Consolas,'Courier New',Monaco,Courier,monospace;
line-height: 18px;
margin: 0 20px;
overflow: hidden;
padding: 10px 20px 10px 45px;
}
However, when I add a large single line of code, it moves to the next line. I'm looking for a way to keep it in the same line with a horizontal scroll bar under the box. So far, I've experimented with options like overflow: auto
, overflow-x: scroll
, and overflow-y: hidden
but haven't found a solution yet.