Center scaled overflow text

Question

In my html / css application, I have the concept of a button, which is essentially a .button class with a bunch of related 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 to be displayed is quite long, but it should still be fully consistent. Since the font-stretch property does not support, I use transform: scale , which does what I need - the view ... 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> 

Now the text is suitable, but not centered, because the position with the content center in the DIV is calculated before the conversion is applied - see the example in this jsfiddle: https://jsfiddle.net/1xz1g634/1/

I can “make” it centered by applying a negative left margin to .button-text , however, that the hack and margin should be different in different browsers.

How can I damage this text? Ideally, without resorting to javascript, but if all else fails, I can use javascript / jquery.

Answer 1

If you set the container to display:flex + justify-content:center , it 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 the long text is not centered is because it overflows normally and therefore text-align:center inefficient.

Scaling text (although a smaller font size { Codepen Demo } is likely to be more appropriate, I feel) will not override text centering because the transforms are only visual.

I think that the optimal solution (except for the font size) would be to absolutely position the inner text element and center using conventional 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 , and also ... works before IE9.

Well, actually, before IE8, using filter: progid:DXImageTransform.Microsoft.Matrix for scaling.

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

Answer 4

This is fixed for you. The text will be auto center, and the button will automatically scale.

CSS

 .button { display: inline-block; padding: 10px 20px; background: yellow; text-align: center; } .button-text { line-height: 30px; transform: scale(0.7, 1); white-space: nowrap; } 

HTML:

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

https://jsfiddle.net/m7Lgmpn6/