Centering scaled overflowing text

Question

In my html/css app, I have a notion of button, which is, in essence, class .button with a bunch of appropriate attributes. Here's a simplified example:

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

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

In a small number of places, the text that needs to be displayed is rather long, yet it still needs to fit fully. As font-stretch property isn't support, I use transform: scale, which does what I need - kind of... In addition to the above, I have:

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

The text now fits, but it's not centred, because the position of centered content within the div is calculated before the transform is applied - see example in this jsfiddle: https://jsfiddle.net/1xz1g634/1/

I can "make" it centred by applying negative left margin to the .button-text, however that's a hack and the margin would have to be different in different browsers.

How can I universally centre that text? Ideally, without resorting to javascript, but, if everything else fails, I can use javascript/jquery.

Answer 1

If you set the container to display:flex + justify-content:center that centers it correctly.

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

Answer 2

Unfortunately, the reason why the long text isn't centered is because it overflows normally and so text-align:center is ineffective.

Scaling the text (although smaller font-size {Codepen Demo} would probably be more appropriate I feel) will not override the text-centering because transforms are visual only.

I think the optimum solution (other than font-sizing) would be to absolutely position the inner text element and center that using the usual methods.

.button {
  width: 120px;
  height: 30px;
  line-height: 30px;
  background: yellow;
  text-align: center;
  position: relative;
  margin: 1em auto;
}
.button-text {
  position: absolute;
  top: 50%;
  left: 50%;
  line-height: 30px;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  ;
}
.button-text.scaled {
  transform: translate(-50%, -50%) scale(0.7, 1);
}

<div class="button">
  <div class="button-text">
    Very Long Button Text
  </div>
</div>

<div class="button">
  <div class="button-text scaled">
    Very Long Button Text
  </div>
</div>

Answer 3

You can do this with display: table as well ... works down to IE9.

Well actually down to IE8 using filter: progid:DXImageTransform.Microsoft.Matrix to scale.

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

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