HTML 新行开始早答案

【问题标题】：HTML new line starts to earlyHTML 新行开始早
【发布时间】：2022-02-11 08:36:13
【问题描述】：

我正在处理我的 404 页面，我正在努力找出导致我的文本自动进入新行的原因。这是它目前的样子：

body {
  background: #081421;
  color: #d3d7de;
  font-family: "Courier new";
  font-size: 18px;
  line-height: 1.5em;
  cursor: default;
}

a {
  color: #fff;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size cubic-bezier(0, 0.5, 0, 1) 0.3s;
}

a:hover,
a:focus {
  text-decoration: none;
  background-size: 100% 2px;
}

.code {
  position: absolute;
  width: 320px;
  min-width: 320px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.code>span {
  display: block;
}

@media screen and (max-width: 320px) {
  .code {
    font-size: 5vw;
    min-width: auto;
    width: 95%;
    margin: auto;
    padding: 5px;
    padding-left: 10px;
    line-height: 6.5vw;
  }
}

<div class="code">
  <span>
    <span style="color: #c46dd4"> if </span>(<span style="font-style: italic; color: #d65562">error</span>
     <span style="color: #4ca8ef"> === </span
    ><span style="color: #d8955c">404</span>) {
  </span>

  <span>
    <span style="padding-left: 15px; color: #ebbd70"
      ><i style="width: 10px; display: inline-block"></i>console</span
    >.<span style="font-style: italic; color: #3fb0f3">error</span>(<span style="color: #88c06e">"Page not found!"</span
    >); 
  </span>

  <span>
    <span style="display: block">}</span>
  <span style="color: #7e848f; font-style: italic">
      // Go <a href="javascript:history.back()">Back</a> or
      <a href="/">Home!</a>
    </span>
  </span>
</div>

这是我的参考/我希望我的最终产品看起来像什么：

我对如何将console.error... 强制插入一行，同时将代码块保持在网站中心感到很困惑。

谢谢

【问题讨论】：

尝试增加 320px。你当初为什么选择这么小的尺寸？
@connexo 会尝试一下 - 之前设置为 240，我已将这个特定的 404 页面更改为 320。

标签： html css

【解决方案1】：

320px 的宽度太短。

    body {
      background: #081421;
      color: #d3d7de;
      font-family: "Courier new";
      font-size: 18px;
      line-height: 1.5em;
      cursor: default;
    }

    a {
      color: #fff;
      text-decoration: none;
      background-image: linear-gradient(currentColor, currentColor);
      background-position: 0% 100%;
      background-repeat: no-repeat;
      background-size: 0% 2px;
      transition: background-size cubic-bezier(0, 0.5, 0, 1) 0.3s;
    }

    a:hover,
    a:focus {
      text-decoration: none;
      background-size: 100% 2px;
    }

    .code {
      position: absolute;
      width: 390px;
      min-width: 320px;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      border: 1px solid red;
    }

    .code>span {
      display: block;
    }

    @media screen and (max-width: 320px) {
      .code {
        font-size: 5vw;
        min-width: auto;
        width: 95%;
        margin: auto;
        padding: 5px;
        padding-left: 10px;
        line-height: 6.5vw;
      }
    }

    <div class="code">
      <span>
        <span style="color: #c46dd4"> if </span>(<span style="font-style: italic; color: #d65562">error</span>
         <span style="color: #4ca8ef"> === </span
        ><span style="color: #d8955c">404</span>) {
      </span>

      <span>
        <span style="padding-left: 15px; color: #ebbd70"
          ><i style="width: 10px; display: inline-block"></i>console</span
        >.<span style="font-style: italic; color: #3fb0f3">error</span>(<span style="color: #88c06e">"Page not found!"</span
        >); 
      </span>

      <span>
        <span style="display: block">}</span>
      <span style="color: #7e848f; font-style: italic">
          // Go <a href="javascript:history.back()">Back</a> or
          <a href="/">Home!</a>
        </span>
      </span>
    </div>

【讨论】：