Question

我尝试使用文本创建容器。然而，当我最小化浏览器选项卡时，我的文字不断受到挤压。即使最小化，我如何使文本保持不变？

<!DOCTYPE html>
<html>

<head>
  <title>Savana - About</title>
  <meta charset="utf-8" />
  <style>
    body {
      font-family: 'Open sans', sans-serif;
    }
    .container-a {
      width: 100%;
      height: 400px;
      background-color: #ffd800;
    }
    .container-a h1 {
      margin: 0;
      text-align: center;
      position: relative;
      top: 100px;
    }
  </style>

  <body>
    <div class="container-a">
      <h1>
            impeccable craftsmanship<br />
            ridiculously comfy shoes<br /> transformative impact
        </h1>
    </div>
  </body>

</html>

Answer 1

你可以这样做，这是正确的方式。

<div class="container-a" style=" resize: none;">
    <h1>
        impeccable craftsmanship<br />
        ridiculously comfy shoes<br /> transformative impact
    </h1>
</div>

Answer 2

调整窗口时，容器会重新调整大小。您可以通过几种方式帮助防止这种情况，例如为容器添加最小宽度，这样当它达到一定大小时，它将不再变小。

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Savana - About</title>
  <meta charset="utf-8" />
  <style>
    body {
      font-family: 'Open sans', sans-serif;
    }
    .container-a {
      width: 100%;
      height: 400px;
      background-color: #ffd800;
      /* Added min width for your container here */
      min-width: 950px;
    }
    .container-a h1 {
      margin: 0;
      text-align: center;
      position: relative;
      top: 100px;
    }
  </style>

  <body>
    <div class="container-a">
      <h1>
            impeccable craftsmanship<br />
            ridiculously comfy shoes<br /> transformative impact
        </h1>
    </div>
  </body>

</html>

＆＃13;

最小化浏览器选项卡时如何保持文本不变？

2 个答案: