为什么将content元素之前的绝对位置设置为inline元素会使它溢出其父级？

Question

请参阅此codepen：

https://codepen.io/jossnaz/pen/BMwpjR

HTML

<br>
<div class="" style="
">
        <span class="" style="">
Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos hendrerit torquent pellentesque per euismod, velit molestie eleifend per rhoncus feugiat fermentum proin.

Suspendisse porttitor diam egestas curabitur malesuada netus enim bibendum, lacinia integer suscipit sem taciti ut nisi nunc, vivamus neque tempor dictum pretium condimentum litora.

Litora primis justo commodo posuere id nullam lacus tempor sociosqu cubilia auctor, nulla maecenas cubilia lacus quisque malesuada risus viverra mattis senectus porttitor ligula a fringilla dui elit nulla hendrerit in condimentum tortor.

Sollicitudin cursus augue semper sodales vitae pel
        </span>
      </div>

CSS

div{
  max-width: 500px;
  width: 500px;
  background-color: cornflowerblue;
}

blockquote, span{
  padding-left: 50px;
  background-color: salmon;
  position: relative;
  &:before {
    content: '“';
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 4.8rem;
    font-style: italic;
    line-height: 0.75;
    text-align: left;
    color: green;
    font-weight: normal;
}
}

结果溢出元素：

我想要什么？鲑鱼红色内联元素停止溢出其父元素。我想继续使用:before，并希望将其保留为内联元素。

Answer 1

您可以尝试使用text-indent而不是填充，并使伪元素相对于父容器：

div {
  max-width: 500px;
  width: 500px;
  background-color: cornflowerblue;
  text-indent:50px;
  position: relative;
}

span {
  background-color: salmon;
}
span:before {
  content: '“';
  position:absolute;
  left: 0;
  top: 6px;
  font-size: 4.8rem;
  font-style: italic;
  line-height: 0.75;
  text-align: left;
  color: green;
  font-weight: normal;
  text-indent:0;
}

<br>
<div>
  <span>
Lorem ipsum nunc hendrerit imperdiet aliquet class massa suspendisse libero, enim condimentum himenaeos hendrerit torquent pellentesque per euismod, velit molestie eleifend per rhoncus feugiat fermentum proin.

Suspendisse porttitor diam egestas curabitur malesuada netus enim bibendum, lacinia integer suscipit sem taciti ut nisi nunc, vivamus neque tempor dictum pretium condimentum litora.

Litora primis justo commodo posuere id nullam lacus tempor sociosqu cubilia auctor, nulla maecenas cubilia lacus quisque malesuada risus viverra mattis senectus porttitor ligula a fringilla dui elit nulla hendrerit in condimentum tortor.

Sollicitudin cursus augue semper sodales vitae pel
        </span>
</div>

Answer 2

在padding-left: 50px; / <blockquote>标签上设置<span>引起了问题。如果可以使用::after伪元素，则一种选择是在带有::before伪元素的文本之前创建50px gab，然后使用::after伪元素将引号定位-元件。例如：

blockquote,
span {
  background-color: salmon;
  position: relative;
  &::before {
    content: "";
    display: block;
    float: left;
    width: 50px;
    height: 1px;
  }
  &::after {
    content: "“";
    position: absolute;
    left: -50px;
    top: 6px;
    font-size: 4.8rem;
    font-style: italic;
    line-height: 0.75;
    text-align: left;
    color: green;
    font-weight: normal;
  }
}

由于我不确定您的所有要求，因此另一种方式是使用text-indent来偏移文本。

我还建议为display: inline; / <blockquote>选择器样式专门设置<span>，因为<blockquote>的默认设置是display: block;。

Answer 3

如果将span标签设置为display: block;，那应该不错。

blockquote, span{
    display: block;
    padding-left: 50px;
    background-color: salmon;
    position: relative;
    ...
}