1
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?

1

6 Answers 6

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/

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

Comments

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/

3 Comments

overflow without a specified with won't work... (and that span is not good)
I beg to differ? Before parsing HTML and CSS in your head, at least test it: jsfiddle.net/TfeLm
you're right. The pre element has a default width:100%; so it works.
1

I think you're looking for overflow:auto:

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

3 Comments

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.
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
When should I vote down? - Is my answer egregiously sloppy, no-effort-expended, or clearly and perhaps dangerously incorrect?
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.

Comments

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/

2 Comments

Your example does not show a scrollbar (at least not in Firefox).
It does in IE, so I thought it worked on every browser :) I think the problem is answered by stephan muller
0

I believe that you should use the following CSS

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

See this live example

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.