CSS transform:scale() 如何仅缩放文本不缩放容器且保持对齐

问题原因 #

• transform: scale() 默认以元素中心作为变换原点，块级h2默认占满父容器宽度，水平缩放后元素整体向中心收缩，视觉上出现左边留白，看起来左对齐失效。
• transform属于纯视觉变换，不会修改元素在文档流中实际占据的空间，因此修改display属性无法解决这个对齐问题。

解决方案 #

只需要给h2设置变换原点为左上角即可，缩放时会从左侧开始变换，保持左对齐效果，修改后的CSS如下：

.address h2 {
  font-size-adjust: 0.6;
  transform: scale(0.8, 1);
  transform-origin: left top; /* 新增：设置变换原点为左上角 */
  margin-bottom: 8px; /* 可按需调整，抵消缩放后元素实际高度和视觉高度的差值，避免和下方内容间距过大 */
  text-align: left;
}

如果需要完全消除缩放带来的布局空间残留影响，也可以给h2设置固定宽度，或者外层包裹一个设置了overflow: hidden的容器，配合宽度调整即可。

内容的提问来源于stack exchange，提问作者m3.b