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来删除空格。

＆＃13;

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);

＆＃13;

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

＆＃13;

我希望这会有所帮助。

删除缩小文本周围的空格 - transform：scale（xx）;

1 个答案: