Question

我正在开发一款使用地图的游戏（当然，这是多行）。我想知道你是否可以让span标签覆盖多行（有该行的结尾是一个新行。）

示例地图：
- - O
- X O
O - O

有没有办法让地图准确显示在网页上面的位置？

以下是JS文件中的一些代码：

for (var col = 0; col < mapHeight; col++)
{
    for (var row = 0; row < mapWidth; row++)
    {
        var character = map2[col][row];

        if (character == "X" || character == "O")
        {
            alertMessage += " " + character;
        }
        else
        {
            alertMessage += "  " + character;
        }

        document.getElementById("map").innerHTML += character;
    }
    alertMessage += "\n";
    // document.getElementById("map").innerHTML += "\n";
}

注释掉的最后一行是我想要做的，但它不适用于简单的“\ n”

Answer 1

在您的javascript中，您可能有

var map =“ - - O \ n- X O \ nO - O”;

也许这将来自服务器。

您可以通过执行

添加行

map = map.replace(/\n/g, "<br/>");

添加行

Answer 2

使用表示换行符的<br>标记

<span>--o<br>-xo<br>o-o</span>

或表示预格式化文字的<pre>标记

<pre>--o
-xo
o-o</pre>

或<div>标记，表示垂直页面流的划分。

<div>--o</div>
<div>-xo</div>
<div>o-o</div>

Answer 3

您可能需要pre。这些保留空白，通常以等宽字体显示。

Answer 4

1。使用<pre>

2。使用<br />

3。 <div></div>中的每一行例如：

<div><span>-</span><span>-</span><span>o</span></div>
<div><span>-</span><span>x</span><span>o</span></div>
<div><span>o</span><span>-</span><span>o</span></div>

Answer 5

您可以使用<br>代码中的<span>标记。

<span>
    - - O<br>
    - X O<br>
    O - O
</span>

这是一个jsfiddle来看看：https://jsfiddle.net/8gtv3wdL/

Answer 6

我明白了！谢谢大家的帮助！

我这样做了：
document.getElementById（“map”）。innerHTML + =“＆lt; br /＆gt;”;

如何使用span元素向网页插入多行？

6 个答案: