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

时间:2011-04-04 22:47:24

标签: javascript jquery html css

如何将pre元素的宽度设置为距其最长的一行?

例如

<pre>
  a
  fuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
  bc
</pre>  

所以我希望PRE具有第二行文字的宽度......

如果屏幕宽度为1024像素且最长行为2000像素,我希望pre具有2000像素宽度

4 个答案:

答案 0 :(得分:9)

你需要你的朋友,内联块。内联块适用于IE 7及之前的所有内容。有一个黑客可以使它适用于它们,这是zoom和* display属性,如下所示。

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

答案 1 :(得分:1)

要为'pre'标签指定固定宽度,您可以尝试这样:例如

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

这里,'width'的值只是一个没有任何单位的数字(即px,em,%等)。

感谢。

答案 2 :(得分:0)

我会假设你的意思是你需要在一行上写一系列单词而不是被包裹到下一行,这意味着你需要

<强> CSS

white-space:no-wrap;

Here's an example.

答案 3 :(得分:0)

CSS

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