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

Question

我目前有以下代码：

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

如您所见，字体大小对于屏幕来说太大了。我希望文本保持其设置的大小，直到溢出屏幕（我的尝试是

max-width

，但这不起作用）。有没有办法只用 CSS 和 HTML 来解决这个问题？

由于我希望文本大小为

20em

除非它溢出屏幕，所以我不想将

width

设置为

20em

以外的任何值。

谢谢！

Answer 1

min

应该这样做。

使用已知字体，您还可以使用良好的后备。

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>

Answer 2

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

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

Answer 3

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

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

Answer 4

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 5

您可以使用以下 npm 库：

https://www.npmjs.com/package/@gmwallet/app-common

导入依赖：

import { fontSizer } from "@gmwallet/app-common";

您的组件的五个 id：

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

使用它：

const result = fontSizer("fname");

这适用于自动响应的 DOM 元素，因此它对于动态数据可能更有用。例如，如果您的文本不是静态的，但假设它包含在名为“helloVar”的变量中，您可以将其放入监视语句中：

  watch: {
    helloVar: {
      handler(newValue) {
        const result = fontSizer('myid');
        if (result === 0) {
          console.log("Font size adapted to input width.");
        }
      },
      immediate: true, // To trigger the handler on component mount
    },
  },