html - 组合显示 : inline and text-indent

Question

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

现在的样子:

它应该是什么样子:

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

有人知道我怎样才能得到这个吗？

FIDDLE: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>

Answer 1

如果你可以添加一个容器 div(左边填充需要它)，然后通过混合 inline 和 before 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