javascript - 将文本跨度到 div 的边缘(无空格)

Question

我正在寻找一种将文本跨越到 div 边缘的解决方案。我不想在 div 中有任何空白。

这是我的 div

<div class="m-card__text-front">
     <p class="fit-text">TEST TEXT</p>
     <p class="is-bold fit-text">FOO BAR</p>
     <p class="is-bold fit-text">LOREM</p>
     <p class="fit-text">LOREM IPSUM</p>
</div>

现在看起来像这样

红色标记的点是我想要文本跨越的位置。

我还需要粗体文本的大小与其他文本不同(更大)。

我目前正在使用 fitText 函数。 https://github.com/davatron5000/FitText.js

像这样使用: <script> $('.fit-text').fitText(0.8); </script>

编辑:

以下是带有插件的 HTML 的样子:

<p class="fit-text" style="font-size: 38.6055px;">TEST TEXT</p>

正在自动添加字体大小。

编辑2:

好吧，我刚刚意识到我错误地解释了我的问题。我如何解释你的功能完全按照我所描述的那样。但我想跨越文本并使字母相应变大。这就是我尝试使用该插件的原因。抱歉，英语不是我的母语。我的错。

Answer 1

这行得通吗？

        <div class="m-card__text-front">
           <p style="font-size:19vw; white-space: nowrap; overflow: hidden;">TEST TEXT</p>
           <p style="font-size:23vw; white-space: nowrap; overflow: hidden;">FOO BAR</p>
           <p style="font-size:28vw; white-space: nowrap; overflow: hidden;">LOREM</p>
           <p style="font-size:14.5vw; white-space: nowrap; overflow: hidden;">LOREM IPSUM</p>
        </div>

JSFiddle

如果文本太小或太大，您可以调整 vw(in style)。 在此代码中，如果您调整页面大小，文本将随页面一起调整其字体大小。