css - Blockquote 添加了额外的 <br>

Question

为什么 blockquote 在它的末尾添加了一个额外的 br，我该如何避免它？ 我怎样才能删除添加的额外 br 以便我的所有行都在一起>

.container-content .main-content .container-test pre {
  font-family: monospace;
  white-space: pre;
  word-break: break-all;
  color: #ececec;
  border: none;
  padding: 0;
  background-color: transparent;
}

blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
}

<div class="container-test">
<pre>
test test tesst
test test tesst
test test tesst
test test tesst
<blockquote>test test tesst
test test tesst
test test tesst
test test tesst</blockquote>
test test tesst
test test tesst
test test tesst
test test tesst
</pre>
</div>

Answer 1

为什么你有一个额外的br的原因在你的 block 引用之后是因为你正在使用 <pre>标签。 pre标记格式的文本与您在代码中的编写方式完全相同。所以这里有两个解决方案

1. 按照您希望的方式格式化代码

.container-test {
  font-family: monospace;
}

blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
}

<div class="container-test">
<pre>
test test tesst
test test tesst
test test tesst
test test tesst
<blockquote>test test tesst
test test tesst
test test tesst
test test tesst</blockquote>test test tesst
test test tesst
test test tesst
test test tesst
</pre>
</div>

1. 避免使用 pre完全，并为您的容器添加宽度。

.container-test {
  font-family: monospace;
  width: 150px;
}

blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
}

<div class="container-test">
test test tesst
test test tesst
test test tesst
test test tesst
<blockquote>
test test tesst
test test tesst
test test tesst
test test tesst
</blockquote>
test test tesst
test test tesst
test test tesst
test test tesst
</div>

您可以阅读有关 pre 的更多信息标签 here .