html - 删除缩小文本周围的空白 - 变换 : scale(xx);

Question

我正在尝试删除我使用 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;
}

Answer 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>

希望对您有所帮助。