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

可以设置

blockquote {
  /* your other styles */
  display: inline;
}

Answer 2

将 blockquote（请使用更好的选择器）的显示属性设置为内联块。

 .container-test pre {
  font-family: monospace;
  white-space: pre;
  word-break: break-all;
}

.container-test pre blockquote {
  padding: 0px 10px 0px;
  margin: 0 0 0px;
  border-left: 3px solid #2471A3;
  display:inline-block;
}

<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 3

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

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

.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>

避免完全使用 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。

Blockquote 添加了额外的 <br>

Blockquote adds extra <br>

css

blockquote