カウンターインクリメントのプロパティでネストされたリストでテキストを正しく折り返す方法は？

Question

私はcounter-incrementプロパティを持つリストを注文しました。長いテキストを複数の行に分割すると、最初の行と同じオフセットを持つようにするにはどうすればよいですか？数字の下に2行目が表示されます。ここで

は（2.3​​項を見て）フィドルです： http://jsfiddle.net/1vh1tt81/1/

私が使用して所望の結果を達成することができました「位置：絶対」に「LI：前に」要素が、それは固有の他の問題を引き起こしました私のプロジェクトでは、これは私にとっては良い解決策ではありません。

同様の質問がありましたが、マークアップでのadditonalタグは、私がどんな追加のタグがないことができますがありました： https://jsfiddle.net/rkmv3rn3/10/

Answer 1

を、私は通常、カウンターに固定幅とマイナスを与えることによってこの問題を解決同じ値のマージン左し、同じLI上パディング左：

li { 
    display: block; 
    padding-left: 1.75em; 
} 

li:before { 
    content: counters(item, ".") ". "; 
    counter-increment: item; 
    display:inline-block; 
    width: 1.75em; 
    margin-left: -1.75em; 
} 

http://jsfiddle.net/1vh1tt81/2/

（アイテムのインデントがである場合o今度はこのフィドルであなたの好みに合わせて、残りのデフォルトマージン/ OL要素とLI要素のパディングをオーバーライドしたいかもしれません）。

これは固定幅がなければ達成するのが難しく、おそらくLIコンテンツ用の追加のコンテナ要素。
カウンターエレメントを通常のフローから外して、それらをLIに関して絶対的に配置することによって、同様の効果を達成する別の選択肢かもしれません。

Answer 2

インナーolためtableレイアウトを使用し、細胞が、これはあなたのために働くと思いnicely-ラインアップ：以下

li > ol > li{ 
    display: table; 
} 

li > ol > li:before { 
    content: counters(item, ".") ". "; 
    counter-increment: item ; 
    display: table-cell; 
} 

はスニペット：

ol { 
 
    counter-reset: item; 
 
    display: table; 
 
} 
 
li { 
 
    display: block; 
 
} 
 
li:before { 
 
    content: counters(item, ".")". "; 
 
    counter-increment: item; 
 
} 
 
li > ol > li { 
 
    display: table-row; 
 
} 
 
li > ol > li:before { 
 
    content: counters(item, ".")". "; 
 
    counter-increment: item; 
 
    display: table-cell; 
 
}

<ol> 
 
    <li>one</li> 
 
    <li>two 
 
    <ol> 
 
     <li>two.one</li> 
 
     <li>two.two</li> 
 
     <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text 
 
     long tex long text long tex long text long tex</li> 
 
    </ol> 
 
    </li> 
 

 
</ol>