我有一个绝对定位的父级,其中包含一些绝对定位的文本,需要对其进行拉伸以匹配底层图像。它看起来像这样:
<div class="text-layer">
<pre class="text-item"> some text </pre>
<pre class="text-item"> some text </pre>
<pre class="text-item"> some text </pre>
</div>
当我在页面上放置文本项时,我有文本片段的(正确)左值。但是,有些文本需要使用 CSS 变换属性进行拉伸。
transform: scaleX(#)
当 div 被拉伸时,它不会在视觉上保持相同的左侧位置,类似于此示例:
1-> xxxxx
2-> xxxxxxxxxxx
我希望效果如下。
1-> xxxxx
2-> xxxxxxxxxxx
除了修复之外,我很好奇为什么“左”没有考虑到这一点。如果我将一个元素定位在'left:0',无论它如何增长,它不应该继续在那里拥有它的'左'边缘吗?
编辑以获取更多详细信息:
.my-canvas {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
background-color: white;
display: block;
}
.text-layer {
color: transparent;
position: absolute;
left: 0;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
}
示例文本项如下所示:
<div class="text-item"
style="position: absolute; left: 80.5557355px;
top: 4.49999999999996px; font-size: 50px;
font-family: sans-serif;
transform: scaleX(2.58938106853314);">
<span class="highlight">H</span>ELLO
</div>