css `whitespace:pre`元素中的字体大小

bsxbgnwa  于 2023-05-19  发布在  其他
关注(0)|答案(1)|浏览(124)

我正在写一个网站,我不想让它复杂。
幸运的是,它在移动的上看起来很好(根据我的口味),但只有一个问题:div中的代码whitespace:pre太小。看起来页面外部的字体被设置在一些单位中,使其对查看者保持恒定的大小,并且在移动的上变得更大。但是pre保持它的宽度不变,它保持很小。
是否有一些神奇的设置,我需要添加到whitespace:pre,将使字体大小的行为一样,没有它?
最小示例:

<html>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style>
    div {
      max-width: 860px;
    }
    pre {
      max-width: 860px;
    }
  </style>

    <body style="font-size: 15px">
        <div>
“Well, Prince, so Genoa and Lucca are now just family estates of the Buonapartes. But I warn you, if you don’t tell me that this means war, if you still try to defend the infamies and horrors perpetrated by that Antichrist—I really believe he is Antichrist—I will have nothing more to do with you and you are no longer my friend, no longer my ‘faithful slave,’ as you call yourself! But how do you do? I see I have frightened you—sit down and tell me all the news.”
        </div>
        <pre style="max-width:860px;">
            Text inside of pre.
        </pre>
    </body>
</html>

桌面:

移动的:

pkmbmrz7

pkmbmrz71#

如果您在pre标签中添加font-size,这可能会起作用,这将设置字体大小,并且在两个设备上显示相同。
例如:

<style>
    div {
      max-width: 860px;
    }
    pre {
      max-width: 860px;
      font-size:12px // or whatever you want
    }
  </style>

相关问题