居中缩放溢出的文本

Question

在我的html/css应用程序中,我有一个按钮的概念,实质上是.button具有一堆适当属性的类.这是一个简化的例子:

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}

<div class="button">
  <div class="button-text">
    Button text
  </div>
</div>

在少数地方,需要显示的文本相当长,但仍需要完全适合.由于font-stretch财产不支持,我使用transform: scale,它做我需要的 - 有点...除了上述,我有:

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
}
.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>

文本现在适合,但它不居中,因为在应用变换之前计算div中居中内容的位置 - 请参阅此jsfiddle中的示例:https://jsfiddle.net/1xz1g634/1/

我可以通过对其应用负左边距来"制造"它.button-text,但是这是一个黑客,并且在不同的浏览器中边距必须不同.

我怎样才能普遍地将该文本作为中心？理想情况下,不使用javascript,但是,如果其他一切都失败了,我可以使用javascript/jquery.

Answer 1

如果将容器设置为display:flex+ justify-content:center，则可以正确居中。

.button {
  width: 120px;
  height: 30px;
  background: yellow;
  display: flex;
  justify-content: center;
}
.button-text {
  line-height: 30px;
  transform: scale(0.7, 1);
  white-space: nowrap;
}

<div class="button">
  <div class="button-text">
    Very long button text
  </div>
</div>