jQuery - make <pre> have the width of its content

How can I set the width of a pre element to the one of the longest line from it?

for example

<pre>
  a
  fuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
  bc
</pre>  

so I want the PRE to have exactly the width of the second line of text...

if the screen width is 1024 pixels and the longest line has 2000 pixels开发者_如何学Python, I want the pre to have 2000 pixel width

You need your friend, inline-block. Inline-block works for everything but IE 7 and prior. There is a hack to make it work for them too, which is the zoom and *display attributes, as seen below.

<style>
    pre{
        background:#ccc;
        display: inline-block;
        zoom: 1;
        *display: inline;
    }
</style>

To give 'pre' tag a fixed width you can try like this: e.g.

<pre width="50">[your Contents]</pre>

Here, value of 'width' is only a number without any unit(i.e. px,em,% etc).

Thanks.

I'm gonna assume you mean you need a series of words on a line not to get wrapped to the next line, meaning you need

CSS

white-space:no-wrap;

Here's an example.

CSS

pre{
word-wrap:break-word;
white-space:pre-wrap;
display:block;
}