为什么设定一个绝对定位：前一个内联元素内容元素使其溢出它的父？

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伪元素中的文本之前创建50像素瞎扯，然后引号与::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

如果您设置的跨度标签display: block;你应该不错。

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