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个小时来解决这个问题，我似乎无法做到正确。任何人都可以帮助我吗？

关心Satanshu

Answer 1

使用真实的HTML元素。

＆＃13;

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

＆＃13;

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

＆＃13;

这是有效的，因为<p>是一个真实的元素而<p1>不是。

如果您对这些细节感到好奇，为什么 <p1>不起作用的原因并不在于它是一个未定义的元素。（否则，它不会做任何事情;它在第一行上甚至不会有左边框。）这是因为浏览器的错误纠正例程认为这是一个内联元素，而{{1}是一个块元素。这真的是导致显示差异的原因不要指望错误纠正程序为你解决所有问题。迟早你会遇到所有浏览器都没有处理的错误，然后你就会遇到麻烦。更好地坚持规则。

Answer 2

谢谢Chris，似乎使用这样的标签导致文本框无法正常工作。我感谢你的帮助，并希望将来能够帮助你。问候 Satanshu

结论 - 使用类！

Answer 3

试试这个：

<!DOCTYPE html>
<html>
<head>
<style>
.w3-code{
  line-height: 200%;
  border-left: 6px solid blue;
  padding: 10px 9px;
  font-size: 17px;
  word-wrap: break-word;
  color:#FFFFFF;
  background-color: #A9A9A9;
  margin:10px 5px 0 0;
}
</style>
</head>
<body>

<div class=w3-code>
&lt;!DOCTYPE html&gt;<br>
&lt;html&gt;<br>
&lt;head&gt;<br>
&lt;title&gt;Page Title&lt;/title&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br><br>
&lt;h1&gt;This is a Heading&lt;/h1&gt;<br>
&lt;p&gt;This is a paragraph.&lt;/p&gt;<br><br>
&lt;/body&gt;<br>
&lt;/html&gt;
</div>


</body>
</html>

这对我有用。

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

3 个答案: