为什么块引号上的引号显示在新行中

Question

这可能很简单，但我无法使其工作。我需要在限制为2行的段落中添加引号。并且显示为图片

图像

或

">

Lorem ipsum悲哀坐amet，consectetur adipiscing elit。门户网站和门户网站

">

我需要删除第一次报价后和最后一次报价前的新行，才能得到这样的东西：

"> Lorem ipsum dolor sit amet，consectetur adipiscing elit。Sed mollis porta enim，et pulvinar erat ">

这是代码：

<blockquote className="mt-6 subtitle-2-regular">
“<p className="line-clamp-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis porta enim, et pulvinar erat</p>”
</blockquote>

请帮忙。谢谢

附言：我正在使用顺风的线夹延长线限制到2。

Answer 1

<p>标记默认具有display:block，因此它将位于新行上

我建议你把你的报价放在<p>里面。

类似于此：

<blockquote className="mt-6 subtitle-2-regular">
<p className="line-clamp-2">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis porta
enim, et pulvinar erat"
</p>
</blockquote>

Answer 2

解决方案之一是使引号位于<p>标签

或者，如果你也想引用任何东西，请添加<q>标记内部的<p>标签

作为下面的示例。

<blockquote className="mt-6 subtitle-2-regular">
<p className="line-clamp-2"><q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis porta enim, et pulvinar erat</q></p>
</blockquote>

Answer 3

由于引号是一条视觉线索，而不是意义的一个组成部分，我们可以使用pseudo-before和after元素添加它们。

为了使它们正确定位，这个片段将p元素包装在另一个元素中，其唯一目的是定位，以便可以相对于它定位伪元素。

该片段是纯CSS格式的，使用-webkit线夹和相关属性。这会自动添加省略号。您需要查看顺风产生的确切代码，以便在必要时更正定位。

blockquote div {
display: inline-block;
margin: 0;
padding: 0;
position: relative;
}
blockquote p::before {
content: '201C ';
position: absolute;
right: 100%;
top: 0;
}
blockquote p::after {
content: '201D ';
position: absolute;
right: 0;
bottom: 0;
}
blockquote p {
width: 300px;
/* just to force lines to wrap for this demo */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin: 0;
padding: 0;
}

<blockquote className="mt-6 subtitle-2-regular">
<div>
<p className="line-clamp-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis porta enim, et pulvinar erat</p>
</div>
</blockquote>