CSS如何使用有效的:: first-line伪元素获得嵌入式显示

Question

这看起来非常简单，但是无论是float，inline-block还是类似的组合，我都无法使用。我试图在第一行上获得更多空间，以使第二行不与标题“冲突”。我知道::first-line不适用于inline元素。我要保留此布局（布局是重要的，而不是inline显示，因此任何可行的方法都可以）。该解决方案应具有广泛的浏览器支持。

我的设计必须保持响应速度，因此文本不应分成不同的部分。我可以使用javascript来做到这一点，并通过在resize上运行脚本来使其保持响应，但我真的很想避免此解决方案。

.heading {
  padding: 5px;
  background-color: blue;
  color: white;
}
.content {
  margin-left: 5px;
}
.content::first-line {
  line-height: 2;
}
.block {
  display: block;
}

<b>Display is fine, first-line doesn't work because of inline + margin left works fine:</b>
<br><br>

<span class="heading">header: </span>
<span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

<br><br>
<b>Display is out now that first-line works because of block (or inline-block) + margin left out too:</b>
<br><br>

<span class="heading">header: </span>
<span class="content block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

Answer 1

您可以在.head中尝试display: inline-block;

.heading {
  padding: 5px;
  background-color: blue;
  color: white;
  display:inline-block;
}
.content {
  margin-left: 5px;
}
.content::first-line {
  line-height: 2;
}
.block {
  display: block;
}

<b>Display is fine, first-line doesn't work because of inline + margin left works fine:</b>
<br><br>

<span class="heading">header: </span>
<span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>

<br><br>
<b>Display is out now that first-line works because of block (or inline-block) + margin left out too:</b>
<br><br>

<span class="heading">header: </span>
<span class="content block">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>