Question

我有一个div，它是100％屏幕宽度，以2个单词为标题。当我缩小屏幕时，单词不会堆叠以使它们响应。我省略了什么？

h1.name {
  font-size: 92px;
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .15em;
}

#heading {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
  width: 100%;
  overflow: hidden;
}

<section id="heading">
  <h1 class="name">Peter Silveri</h1>
</section>

Answer 1

html的默认行为是它将两个单词彼此堆叠，因此您无需添加额外的CSS属性即可堆叠

以下代码对我有用，请看一下代码的其他部分：

<head>
<title>Page Title</title>
<style>
    h1.name {
        font-size: 92px;
        padding-top: 60px;
        padding-bottom: 60px;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: .15em;
    }
</style>
</head>
<body>
    <section id="heading">
        <h1 class="name">Peter Silveri</h1>
    </section>
</body>

如何通过缩小屏幕尺寸使2个单词叠在一起

1 个答案: