使用 CSS 自动调整溢出文本的大小

Question

我目前有以下代码：

<p style="font-size: 20em; max-width: 100vw;">Hellooo!</p>

如您所见，字体大小对于屏幕来说太大了。我希望文本保持其设置的大小，直到它溢出屏幕（我的尝试是 max-width，但那不起作用）。有没有办法只用 CSS 和 HTML 来解决这个问题？

因为我希望文本大小为 20em 除非它溢出屏幕，所以我不想将 width 设置为 20em 以外的任何值。

谢谢！

Answer 1

如果您知道文本的长度，则可以使用 CSS min() 函数来调整您的 em 大小和取决于视口的最大大小。否则你将需要一个 polyfill。

<p style="font-size: min(20em, 12vw); max-width: 100vw;">Hellooo!</p>

Answer 2

您可以使用 CSS calc 函数并根据 vw 值更改字体大小。

<p style="font-size:calc(25vw)">Hellooo!</p>

Answer 3

media-queries和可变单位（vw）的组合将解决！

.mytext{

}
@media screen and (min-width: 1200px) {/*adjust*/
  .mytext {
    font-size: 20em;
  }
}
@media screen and (max-width: 1200px) {/*adjust*/
  .mytext {
    font-size: 20vw;
  }
}

<p style="" class="mytext">Hellooo!</p>

Answer 4

min should do it.

有了已知的字体，你也可以使用一个好的后备。

p {
  font-size: min(20em, 28vw);
  
  /* Next rules are only be have a clearer preview */
  line-height: 1;
  text-align: center;
  padding: 0;
  margin: 0;
}

<p>Hellooo!</p>

使用 CSS 自动调整溢出文本的大小

Automatically Resize Overflowing Text With CSS

html

css

font-size