删除缩小文本周围的空白 - transform: scale(xx);答案

【问题标题】：Remove whitespace around scaled down text - transform: scale(xx);删除缩小文本周围的空白 - transform: scale(xx);
【发布时间】：2018-04-21 08:43:06
【问题描述】：

我正在尝试使用 transform: scale(0.25); 删除一些已从 100% 缩小到 0.25% 的文本周围的空白。我遇到了这个答案 - White space around css3 scale - 但这意味着我需要一个带有 px 值的容器，我试图避免这种容器，因为文本可以跨越多行。有谁知道那里有其他解决方案吗？

JSfiddle - https://jsfiddle.net/pw9j9wb4/

<h1 class="scaled">This is a heading that can span many many many many many many many many many many many many many many many many many many many many lines</h1>
<h1>This is a heading that can span many many many many many many many many many many many many many many many many many many many many lines</h1>

.scaled {
  transform: scale(0.25);
  transform-origin: top left;
}

【问题讨论】：

不幸的是，scale() 就是这样工作的，尝试删除空格很麻烦，为什么不改用font-size 呢？
是的 font-size 是我最初尝试的，但它不尊重纵横比，单词开始跳到第一行等，这让它看起来有点奇怪。 Scale 工作得很好，直到我发现空白也被保留了。
所以你想在h1 中保留换行符，即使小版本中有更多空间可以容纳单词？
是的，想要的效果是保留换行符。小版本应该是大文本的直接副本，仅占 25%。
我明白了，这样做的目的是什么？您是否正在尝试创建页面的缩小版本？

标签： html css

【解决方案1】：

我建议手动调整文本和节点的大小，而不是使用scale 删除空格：

const titleNode = document.getElementById('myTitle');
const scaleValue = 0.25;

// function to split a size value into an array
function split(value) {
    const num = parseFloat(value);
    return [num, value.replace(num, '')];
}

// function that scales the header by a value
function scale(scale) {
    const style = window.getComputedStyle(titleNode, null);

    const fontParts = split(style.getPropertyValue('font-size'));
    titleNode.style.fontSize = `${fontParts[0] * scale}${fontParts[1]}`;

    const widthParts = split(style.getPropertyValue('width'));
    titleNode.style.width = `${widthParts[0] * scale}${widthParts[1]}`;
}

setTimeout(scale, 1000, scaleValue);

<h1 id="myTitle">
    This is a heading that can span many many many many many many many many
    many many many many many many many many many many many many lines
</h1>

我希望这会有所帮助。

【讨论】：