Question

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, I want the pre to have 2000 pixel width

Answer 1

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>