How can I implement the code display style in StackOverflow?

Question

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

I have a line of code ( which is to long to be displayed in one line ) to be displayed on a web page in one line, just like above.

I don't it to be wrapped into two lines.

Can I accomplish this only using css?

code.google.com/p/google-code-prettify

David
– David

2012-04-10 15:41:52 +00:00
Commented Apr 10, 2012 at 15:41 — David
– David, Commented Apr 10, 2012 at 15:41

Stephan Muller · Accepted Answer · 2012-04-10 15:48:57Z

4

To actually make this happen when you use words with spaces in between them overflow:auto is not enough, you'll also need text-overflow: nowrap.

http://jsfiddle.net/kZV3j/

answered Apr 10, 2012 at 15:48

Stephan Muller

27.7k18 gold badges87 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Blender · Accepted Answer · 2012-04-10 15:51:06Z

3

Here's how SO's code block looks:

<pre>
  <code>
    <span>...</span>
  </code>
</pre>

And the CSS:

pre {
  overflow: auto;
}

Demo: http://jsfiddle.net/TfeLm/

edited Apr 10, 2012 at 15:51

answered Apr 10, 2012 at 15:42

Blender

300k55 gold badges462 silver badges511 bronze badges

3 Comments

Wouter J Over a year ago

overflow without a specified with won't work... (and that span is not good)

Blender Over a year ago

I beg to differ? Before parsing HTML and CSS in your head, at least test it: jsfiddle.net/TfeLm

Wouter J Over a year ago

you're right. The pre element has a default width:100%; so it works.

Travesty3 · Accepted Answer · 2012-04-10 15:42:27Z

1

I think you're looking for overflow:auto:

<div style="overflow:auto; width:200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

answered Apr 10, 2012 at 15:42

Travesty3

14.5k7 gold badges64 silver badges103 bronze badges

3 Comments

Travesty3 Over a year ago

Downvote for using inline CSS? It's a quick example. It works fine. I'm not suggesting to code an entire project using inline CSS.

Wouter J Over a year ago

Yes, quick example or not avoid using inline CSS. An answer need to show a good way of doing it, not an quick and dirty example

Travesty3 Over a year ago

When should I vote down? - Is my answer egregiously sloppy, no-effort-expended, or clearly and perhaps dangerously incorrect?

j08691 · Accepted Answer · 2012-04-10 15:43:14Z

1

Create a containing element (e.g. a div), then set some basic CSS properties on it that define a width, and handle the overflow. Like this:

HTML

<div class="short">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

CSS:

.short {
    width:400px;
    padding: 10px;
    overflow-x:scroll;
}

jsFiddle example. Works in all modern browsers and IE8.

answered Apr 10, 2012 at 15:43

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Wouter J · Accepted Answer · 2012-04-10 15:44:05Z

0

I think you are looking for the overflow property with a auto value:

<style>pre { width: 200px; overflow: auto; }</style>
<pre><code>&lt;p&gt;Some tooooo long text on one line&lt;/&gt;</code></pre>

Live example: http://jsbin.com/uhuveg/

answered Apr 10, 2012 at 15:44

Wouter J

42k15 gold badges113 silver badges114 bronze badges

2 Comments

Travesty3 Over a year ago

Your example does not show a scrollbar (at least not in Firefox).

Wouter J Over a year ago

It does in IE, so I thought it worked on every browser :) I think the problem is answered by stephan muller

jacktheripper · Accepted Answer · 2012-04-10 17:42:13Z

0

I believe that you should use the following CSS

#id {
    width: 400px;
    padding: 5px;
    background: #C3C3C3;
    overflow-x: scroll
}

See this live example

answered Apr 10, 2012 at 17:42

jacktheripper

14.3k12 gold badges62 silver badges93 bronze badges

Collectives™ on Stack Overflow

How can I implement the code display style in StackOverflow?

6 Answers 6

Comments

3 Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related