H1 larger than viewport - how? - css

Question

Trying to make an H1 larger than the viewport so it partially sits hidden off the screen horizontally without prompting x-axis scroll. The body and container width is set to 100% so currently the H1 just breaks to the next line when it gets wider than the viewport. Any idea's?

Answer 1

This was my interpretation of your question, the use of vh units makes the font-size size to the viewport.:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#biggee {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
font-size: 50vh;
line-height: 15vh;
white-space: nowrap;
}
<div id="biggee">
<h1>This is HUGE</h1>
</div>

Answer 2

A possible solution is to set a height equal to a single line of your h1 on the container.
Example:
.container {
width: 100%;
overflow:hidden;
height: 690px;
}
Fiddle: http://jsfiddle.net/7pyxtjah/
So if a single line of your h1 is 60px in height, make the height 60px.

Answer 3

One way (of presumably, many) is:
h1 {
/* width of the parent element: */
width: 100%;
/* not particularly relevant */
padding: 0;
margin: 0;
/* large font-size to increase the chance of the text
extending out of the view-port: */
font-size: 600%;
/* again, to increase the chance of the text exceeding
the view-port: */
letter-spacing: 400%;
/* to prevent scroll-bars: */
overflow: hidden;
/* preventing line-breaks, to stop wrapping: */
white-space: nowrap;
}
<h1>This is the header</h1>
Unless you meant, literally, to have the <h1> element larger than the view-port, in which case:
html, body {
margin: 0;
padding: 0;
/* to prevent the user scrolling to see the extent of the text
'below the fold': */
overflow-y: hidden;
}
h1 {
/* vh: 1% of the viewport's height,
this sets font-size to 150% of the viewport's height: */
font-size: 150vh;
line-height: 1.4;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
}
<h1>This is the header</h1>
References:
CSS relative lengths and units (including vh/vw).