Say I have several pretty longs lines in a paragraph:

<div style="overflow: auto"> 
    <p> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
    <p> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
</div>

and window width less that width of the pahagraph (a's + b's + c's). Currently scroll will appear only if width of any of ponents (a, b, or c) is more that width of the window and over ponents are carried to the new lines. I want contents of each paragraph appear on the same line with a scroll. How can I treat each paraghaph as a string, so contents of the paragraph is treated like a single line?

Say I have several pretty longs lines in a paragraph:

<div style="overflow: auto"> 
    <p> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
    <p> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
</div>

and window width less that width of the pahagraph (a's + b's + c's). Currently scroll will appear only if width of any of ponents (a, b, or c) is more that width of the window and over ponents are carried to the new lines. I want contents of each paragraph appear on the same line with a scroll. How can I treat each paraghaph as a string, so contents of the paragraph is treated like a single line?

• javascript
• jquery
• html
• css

3 Answers 3

With CSS you can do:

p {
    white-space: nowrap;
    overflow: auto
}

This make the spaces non-breaking, so the paragraph will all be on one line.

You can set white-space:nowrap and overflow:auto property of css. You can assign a class to paragraph tag for which you want text on single line.

CSS

.className {
    white-space: nowrap;
    overflow: auto;
}

Html

<div style="overflow: auto"> 
    <p class="className"> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
    <p class="className"> 
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccccccccccccccccccccccccccccc
    </p> 
</div>

Either add styles as below

p{
    overflow:auto;
    white-space: nowrap;
}

or use jQuery as below

$('p').css('overflow','auto');
$('p').css('white-space','nowrap');

Here is a live fiddle example http://jsfiddle/mayooresan/qmCwL/