0

为什么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>

4

3 回答 3

0

在你的块引用之后你有一个额外的原因br是因为你正在使用<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标签的更多信息。

于 2018-01-07T20:54:15.507 回答
-1

你可以设置

blockquote {
  /* your other styles */
  display: inline;
}
于 2018-01-07T20:50:54.330 回答
-1

将blockquote的显示属性（请使用更好的选择器）设置为inline-block。

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

于 2018-01-07T20:52:59.473 回答