ディスプレイの組み合わせ：インラインとテキストインデント

Question

display: inlineとtext-indentを結合したいと思います。私はそれが不可能であることを読んだ。したがって、私は回避策です。私は<article>を使用しようとした

：それはのようになりますどのように

：それは今どのように見えるか

。しかし、これは1つの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を追加することができますし、擬似要素の前に、あなたが達成することができた場合あなたは何をしたい：

.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