html - 文本框，将文本带到文本框中的下一行

Question

我已经浏览了您庞大的问题数据库，但似乎没有找到答案。我在将文本换行时遇到问题 - 即使之前的行上仍有空间。这是代码:

p1 {
  border-left: 6px solid blue;
  background-color: lightblue;
  padding: 10px 9px;
  font-size: 17px;
  word-wrap: break-word;
}
br {
  line-height: 200%;
}

<br>
<p1> <b> &lt; !DOCTYPEhtml &gt; <br> &lt; html &gt; </b>
</p1>
<br>

现在，如果您要运行它，您会看到类似下图的内容:

现在我希望它看起来像这样:

现在这是 W3School 网页上编辑器选项卡下的文本框图像。我试图为我的网站创建类似的框 - 蓝色边线一直向下，文本布局类似于 W3Schools。但即使在这个问题上花了 5 个小时，我似乎也做不对。谁能帮帮我？

问候撒旦

Answer 1

使用真正的 HTML 元素。

p.t1 {
  border-left: 6px solid blue;
  background-color: lightblue;
  padding: 10px 9px;
  font-size: 17px;
  word-wrap: break-word;
}
br {
  line-height: 200%;
}

<br>
<p class="t1"> <b> &lt; !DOCTYPEhtml &gt; <br> &lt; html &gt; </b>
</p1>
<br>

这是有效的，因为 <p>是一个实数元素并且<p1>不是。

如果您对具体细节感到好奇，原因 <p1>不起作用不是因为它是未定义的元素。 (否则，它不会做任何事情；它甚至不会在第一行有左边框。)这是因为浏览器的纠错例程认为这是一个内联元素，而 <p>是 block 元素。这才是造成显示差异的真正原因。 不要指望纠错例程可以为您解决所有问题。您迟早会遇到并非所有浏览器都以相同方式处理的错误，然后您就会遇到麻烦。最好遵守规则。