html - 组合显示:内联和文本缩进

我想结合display: inline和text-indent。我读到这是不可能的。因此，我有一个解决方法。

现在的样子：



它应该是什么样的：



我尝试使用<article>。但这仅适用于一个p标签。

有谁知道我怎么能得到这个？

字段：https://jsfiddle.net/h22ede56/11/

article {
  text-indent: -20px;
  padding-left: 20px
}
.seitenumbruch{
  display: inline
}
p._10_Lesetext_02_Txt_lb {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-left: 9px;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 1;
}
p._10_Lesetext_02_Txt_lb_tab {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-bottom: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 1;
}
p._10_Lesetext_02_Txt {
  font-size: 0.783em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1.223;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  orphans: 1;
  page-break-after: auto;
  page-break-before: auto;
  text-align: left;
  text-decoration: none;
  text-transform: none;
  widows: 2;
}
span.semibold-semicondensed {
  font-family: "Source Sans Pro Semibold", sans-serif;
  font-size: 0.75em;
  font-style: normal;
  font-weight: 600;
}
span._idGenCharOverride-1 {
  font-size: 0.958em;
}

 <div id="page169" title="170" class="seitenumbruch">
    <p class="_10_Lesetext_02_Txt_lb"><span class="semibold-semicondensed _idGenCharOverride-1">Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>
  <div id="page170" title="170" class="seitenumbruch">
    <p class="_10_Lesetext_02_Txt_lb seitenumbruch"><span class="semibold-semicondensed _idGenCharOverride-1">Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>
  <div id="page171" title="171" class="seitenumbruch">
    <p class="_10_Lesetext_02_Txt seitenumbruch">together Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
    <p class="_10_Lesetext_02_Txt_lb"><span class="semibold-semicondensed _idGenCharOverride-1">Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
    <p class="_10_Lesetext_02_Txt_lb"><span class="semibold-semicondensed _idGenCharOverride-1">Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>

最佳答案

如果您可以添加容器div（左侧填充所需的容器），则通过混合内联和psuedo元素之前，可以实现所需的功能：

.container {
  padding-left: 1em;
}

.seitenumbruch,
p {
  display: inline;
  margin: 0;
  padding: 0;
}

p._10_Lesetext_02_Txt_lb:before {
  content: '';
  display: block;
  height: 1em;
}

.semibold-semicondensed {
  margin-left: -1em;
}

<div class="container">
  <div id="page169" title="170" class="seitenumbruch">
    <p class="_10_Lesetext_02_Txt_lb"><strong class="semibold-semicondensed _idGenCharOverride-1">Name.</strong>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>
  <div id="page170" title="170" class="seitenumbruch">
    <p class="_10_Lesetext_02_Txt_lb seitenumbruch"><strong class="semibold-semicondensed _idGenCharOverride-1">Name.</strong> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>
  <div id="page171" title="171" class="seitenumbruch">
    <p class="_10_Lesetext_02_Txt seitenumbruch">together Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
    <p class="_10_Lesetext_02_Txt_lb"><strong class="semibold-semicondensed _idGenCharOverride-1">Name.</strong> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
    <p class="_10_Lesetext_02_Txt_lb"><strong class="semibold-semicondensed _idGenCharOverride-1">Name.</strong> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
  </div>
</div>

Updated fiddle