Question

尝试使H1大于视口，使其部分隐藏在屏幕外，而不会提示x轴滚动。正文和容器宽度设置为100％，因此当H1比视口宽时，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>元素大于view-port，在这种情况下：

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;
}

小提琴：http://jsfiddle.net/7pyxtjah/

因此，如果h1的单行高度为60px，则将高度设为60px。

H1比视口大 - 怎么样？

3 个答案: