时间戳

首页 > 解决方案 > 使字体大小相对于它所在的容器？在 StreamElements 内

javascript - 使字体大小相对于它所在的容器？在 StreamElements 内

问题描述

我正在帮助我的朋友为他的 Twitch 流创建自定义警报。我遇到了一个问题，字体大小。虽然它适用于大多数名称，但较长的名称会发出警报并使其看起来不专业。

有没有一种使用 HTML、CSS、JS 或 Jquery（无需下载）的方法，可以让我根据字符长度或整体宽度缩小字体？

谢谢

标签： javascripthtmlcssfontsfont-size

解决方案

考虑 ID 为“alert”的 H1（您可以使用任何其他逻辑保持不变）

const alert = document.getElementById("alert");
const name = document.getElementById("alert").innerText;
    if (name.length < 15){
        alert.style.fontSize = "2em"; // Change these values accordingly
    } else {
        alert.style.fontSize = "0.5em";
    }
<h1 id="alert">Some veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeerrrrrrrrrrrrrrrrrrrrrryyyy long name</h1>

说明： 我们从警报检查中获取名称，如果它的长度小于某个数量（这里是 15）并将其字体大小设置为大，否则我们将其保持小。可以使用 $(element).css() 在 JQUERY 中应用相同的东西

推荐阅读