主页 / 问题 / 1598315
Accepted
Никита Трохимчук
Asked:2024-10-31 01:18:17 +0000 UTC2024-10-31 01:18:17 +0000 UTC

JavaScript 换行符不起作用

  • 772

有这段代码。

document.addEventListener("DOMContentLoaded", function() {
  let text = "Привет меня зовут Гриша.\n Я иду в восьмой класс.";
  let index = 0;

  function type() {
    if (index < text.length) {
      document.getElementById("scene").textContent += text.charAt(index);
      index++;
      setTimeout(type, 100);
    }
  }

  type();
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url("http://www.rw-designer.com/cursor-view/6921.png"), auto;
}

body {
  background: Black;
  font-family: Courier, monospace;
}

#scene {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: Typing 0.75s step-end 1;
  color: red;
}

@keyframes blinkCursor {
  from {
    border-right-color: rgba(0, 0, 0, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}
<!DOCTYPE html>
<html>

<head>
  <title>Печатающий текст.</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>

<body>
  <div id="scene">
  </div>
</body>

</html>

由于某种原因，文本未传输。我猜问题出在代码中的某个地方，而不是我输入 \n 的事实。我尝试了 br，但都不起作用。但为什么呢？

javascript

1 个回答

  1. Best Answer

    默认情况下，浏览器在渲染 html 时，会将所有空白字符替换为空格；如果一行中有多个字符，则会显示一个空格。

    white-space要更改此行为，您可以使用带有值 的属性pre。

    document.addEventListener("DOMContentLoaded", function() {
  let text = "Привет меня зовут Гриша.\nЯ иду в восьмой класс.";
  let index = 0;

  function type() {
    if (index < text.length) {
      document.getElementById("scene").textContent += text.charAt(index);
      index++;
      setTimeout(type, 100);
    }
  }

  type();
});
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: url("http://www.rw-designer.com/cursor-view/6921.png"), auto;
}

body {
  background: Black;
  font-family: Courier, monospace;
}

#scene {
  position: absolute;
  width: 400px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: Typing 0.75s step-end 1;
  color: red;
  white-space: pre;
}

@keyframes blinkCursor {
  from {
    border-right-color: rgba(0, 0, 0, 0.75);
  }
  to {
    border-right-color: transparent;
  }
}
    <!DOCTYPE html>
<html>

<head>
  <title>Печатающий текст.</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
</head>

<body>
  <div id="scene"></div>
</body>

</html>

    • 0

相关问题