Scaling centered text with CSS3 translateZ

Question

I'm looking for a way to scale a series of centered headlines, but the text breaks out of the container element if the window is scaled down (it's hard to describe ;) Each headline needs to stay on one line and be centered.

You can take a look at what I'm talking about here:

http://codepen.io/bobdobbalina/pen/HdBfE/?editors=110

You'll need to scale your browser window up/down to see what I mean.

Any recommendations would be greatly appreciated.

Answer 1

not too sure of what you are trying , but if you want your text to be centered and overflowing on both sides, your h2 should have no virtual width and display should be turned to inline-block .

test this http://codepen.io/gc-nomade/pen/cAyit

In this case , transform has nothing to do here :)

Answer 2

Just remove 'white-space: pre' this from your css

'pre' preserves New lines, Spaces and tabs

h1 {
  white-space: pre;
}

h2 {
  white-space: pre;
}

Answer 3

From this CSS-Tricks post I found a CSS-only solution for scaling font-size to the screen size.

The solution is a new unit for font-size : vw and vh . Which are relative to the width and height of the screen. So, I changed your definitions for the font-size on h1 , h2 :

h1 {
    margin: 0;
    white-space: pre;
    font-size: 4vw; /* this is the vw (view width) unit in action */
}
h2 {
    white-space: pre;
    font-size: 3vw; /* this is the vw (view width) unit in action */
}

Here's a forked CodePen showing the effect with that solution with the text scaling relative to the width of the browser.

(Note that this is not supported by all browsers, so a JS backup plan might be good.)