CSS 文本采用最大尺寸而不换行或超出屏幕

Question

我需要的是文本以最大尺寸显示，不换行或超出屏幕范围。我试过 @media 并更改字体大小，但这太复杂了！我想要实现的是，即使在移动设备上，example.com 处的面孔也会以最大 font-size 出现。这里的想法是不使用媒体查询...

试试代码片段来查看 iframe

iframe {
  width: 100%;
  height: 100vh;
  border: none;
}

<iframe src="https://www.example.com/404.shtml">Your browser doesn't support iframes</iframe>

Answer 1

我最初的想法是使用 vw 属性作为 font-size。我创建了这个 fiddle 来演示它是如何工作的。调整渲染屏幕的大小以查看字体如何随着 window 变小、变大和变大而缩小。您可以使用媒体查询来确定最大字体大小。

对于 no-wrapping 只需在 css 中添加 white-space: nowrap;。

CSS Text taking maximum size without wrapping or going out of the screen