transform scale只缩小文字 不缩小空间

`transform: scale()` 可以同时缩放元素的大小以及内部的文字大小，如果你只想缩小文字而不影响元素的大小，可以考虑使用 `font-size` 属性来控制文字的大小，例如：

.element {
  transform: scale(0.5); /* 缩小元素的大小 */
  font-size: 0.5em; /* 缩小文字的大小 */
}

这样就可以保持元素的空间大小不变，只缩小了文字大小。

相关问题

transform scale 缩小文字后偏移位置，文字对父元素不能水平居中

如果使用 transform scale 缩放文字后导致文字偏移，同时又想让缩放后的文字水平居中，可以尝试使用以下方法：

1. 使用 position 和 transform 属性

可以设置父元素为相对定位，然后将文字设置为绝对定位，再通过 transform 属性进行缩放。最后通过 left 和 top 属性进行微调，使文字水平和垂直居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
}

2. 使用 display 和 text-align 属性

可以设置父元素为 flex 布局，让子元素水平和垂直居中，然后再通过 transform 缩放文字。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  transform: scale(0.5);
}

这两种方法都可以解决文字缩放后偏移的问题，并且让文字水平和垂直居中。

css transform scale

CSS的`transform: scale()`属性用于对元素进行缩放操作。这个属性可以接受一个或两个参数，表示元素在水平和垂直方向的缩放比例。

如果只提供一个参数，那么元素将按照同一比例在水平和垂直方向上进行缩放。例如，`transform: scale(0.5)`将使元素的尺寸缩小为原来的一半。

如果提供两个参数，第一个参数表示水平方向的缩放比例，第二个参数表示垂直方向的缩放比例。例如，`transform: scale(0.5, 1.2)`将使元素在水平方向缩小为原来的一半，在垂直方向放大为原来的1.2倍。

需要注意的是，`scale()`属性会改变元素的大小，但不会改变元素的位置。如果需要同时缩放大小和移动位置，可以使用`translate()`属性结合`scale()`属性来实现。

希望以上解答能够满足您的需求，如果还有其他问题，请随时提问。