H1 больше, чем область просмотра - как?

Question

Попытка сделать H1 больше, чем область просмотра, поэтому он частично скрывается от экрана горизонтально, не запрашивая прокрутку по оси x. Ширина тела и контейнера установлена ​​равной 100%, так что в настоящее время H1 просто ломается до следующей строки, когда она становится шире, чем область просмотра. Есть идеи?

Answer 1

Это была моя интерпретация вашего вопроса, использование vh единиц делает размер шрифта размера в видовом .:

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

Один из способов (по-видимому, многих) является:

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>

Если вы не имел в виду, в буквальном смысле, чтобы иметь <h1> элемент больше, чем вид порта, в этом случае :

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>

Ссылки:

• CSS relative lengths and units (including vh/vw).

Answer 3

Возможное решение - установить высоту, равную одной строке вашего h1 на контейнере. Пример:

.container { 
    width: 100%; 
    overflow:hidden; 
    height: 690px; 
} 

Fiddle: http://jsfiddle.net/7pyxtjah/

Так что, если одна строка вашего h1 будет 60px в высоту, сделать высоту 60px.