如何用CSS让标题h1有弹性

Question

我需要说的是，我已经有一段时间没有接触 CSS 了 顺便说一句，我的问题是我无法创建弹性 h1 我所说的弹性是什么意思？ 我的意思是它位于中心，并且根据里面的单词数量而变大。 相反，我得到了一个覆盖 100% 页面的 h1 我展示代码

.title h1 {
    text-align: center;
    font-family: 'Namecat';
    color: #e20c70;
    font-size: 70px;
    filter: none;
    border: 4px solid #d10459;
    letter-spacing: 5px;
    border-radius: 20px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: auto;
    box-shadow: 0 0 0.2rem #fff, 0 0 0.1rem #fff, 0 0 1rem #d10459, 0 0 0.3rem #d10459, 0 0 1.8rem #d10459, inset 0 0 0.2rem #d10459;
}

我一整天都在试图找出我错在哪里。

啊，我忘了提及，我需要 drupal cms 的这段代码

Answer 1

您可以使用clamp()使单词响应弹性并使用width:fit-content使其随着大小增加而不是默认采用全角。也许它能回答你的问题

h1.title {
    width:fit-content;
    text-align: center;
    font-family: 'Namecat';
    color: #e20c70;
    font-size: clamp(15px,5vw,8rem);
    filter: none;
    border: 4px solid #d10459;
    letter-spacing: 5px;
    border-radius: 20px;
    padding-top: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    margin: auto;
    box-shadow: 0 0 0.2rem #fff, 0 0 0.1rem #fff, 0 0 1rem #d10459, 0 0 0.3rem #d10459, 0 0 1.8rem #d10459, inset 0 0 0.2rem #d10459;
}

<h1 class="title">Lorem ipsum dolo</h1>