时间戳

首页 > 解决方案 > 使用 css 或 js 强制适合字体高度

javascript - 使用 css 或 js 强制适合字体高度

问题描述

早在 2010 年左右就有人问过这个问题，但答案已经过时了。我想强制字体适合高度和宽度。

目前我有这个代码：

<div class="box" style="width:300px;height:300px; background-color: coral;">
  MY TEXT
</div>

使用找到的建议之一：textFit 或任何其他类似的脚本。
我可以执行以下操作：

在此处输入图像描述

我想要实现的是能够强迫它（即使它不成比例）做这样的事情：

在此处输入图像描述

它可以在 js 或 css 中。无论哪种方式都可以实现。有任何想法吗？

标签： javascriptcss

解决方案

let el = document.querySelector(".box");

let width = 300;
let height = 300;

let ws = (width / el.offsetWidth);

let hs = (height / el.offsetHeight);


el.style.transform = `scaleX(${ws}) scaleY(${hs})`;
<div class="box" style="display:inline-block; transform-origin: top left; background-color: coral;">
  MY TEXT
</div>

你可以使用transform: scale(x, y)属性。

推荐阅读