将多行内容与：内容之前和之后对齐

Question

我有一个文本，我使用CSS来添加引号标签。当文本到达新行时，它不会在引号符号之后但在

之前对齐

＆＃13;

＆＃13;

div {
  width: 240px;
}

p:before {
  content: "“";
  font-size: 30px;
}

p:after {
  content: "”";
  font-size: 30px;
}

＆＃13;

<div>
  <p class="quote">This is some text that represents a quote that is rather long and splits into multiple lines</p>
</div>

＆＃13;

＆＃13;

＆＃13;

我希望它看起来像这样

可以使用:before和:after完成，还是应该寻找其他方法？

Answer 1

将:before及其父p分别定位为absolute和relative以完成此操作。请查看下面的代码段以供参考。

div {
  width: 240px;
}

p {
  padding: 10px 15px;
  position: relative;
}

p:before {
  content: "“";
  font-size: 30px;
  position: absolute;
  left: 0;
  top: 0;
}

p:after {
  content: "”";
  font-size: 30px;
  position: absolute;
  bottom: 0;
  margin-left: 5px;
}

<div>
  <p class="quote">This is some text that represents a quote that is rather long and splits into multiple lines</p>
</div>

Answer 2

试试这个

＆＃13;

＆＃13;

div {
  width: 240px;
}
p:before,
p:after {
  display: inline-block;
  vertical-align: middle;
}

p:before {
  content: "“";
  font-size: 30px;
}

p:after {
  content: "”";
  font-size: 30px;
}

＆＃13;

<div>
  <p class="quote">This is some text that represents a quote that is rather long and splits into multiple lines</p>
</div>

＆＃13;

＆＃13;

＆＃13;