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

发布于 2025-01-15 19:27:14 字数 394 浏览 4 评论 0原文

我目前有以下代码：

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

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

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

谢谢！

原文

I currently have the following code:

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

As you can see, the font-size is too large for the screen. I want the text to stay at its set size until it overflows the screen (My attempt is the max-width, but that is not working). Is there a way to fix this with CSS and HTML only?

Since I want the text size to be 20em unless it overflows the screen, I do not want to set the width to any value other than 20em.

Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

時窥 2025-01-22 19:27:14

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>

min should do it.

With a known font, you can also use a good fallback.

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>

回复收藏 0 原文

清风疏影 2025-01-22 19:27:14

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

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

If you know the length of text, you can use the CSS min() function with your em sizing and the maximum size dependent on the viewport. Otherwise you are going to need a polyfill.

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

回复收藏 0 原文

一桥轻雨一伞开 2025-01-22 19:27:14

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

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

You can use the CSS calc function and change the font size based on the vw value.

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

回复收藏 0 原文

泪痕残 2025-01-22 19:27:14

结合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>

A combination of media-queries and variable units(vw) will solve!

.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>

回复收藏 0 原文

忆依然 2025-01-22 19:27:14

您可以使用以下 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
    },
  },

You can use the following npm library:

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

Import the dependency:

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

Five an id to your component:

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

Use it:

const result = fontSizer("fname");

This is for automatically responsive DOM element, so it could be more useful with dynamic data. For example if your text is not static, but let's say that it is contained in a variable called "helloVar", you could put it in a watch statement:

  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
    },
  },

回复收藏 0 原文

~没有更多了~