Как правильно обернуть текст во вложенном списке с помощью свойства counter-increment?

Question

Я заказал список со свойством counter-increment. Как сделать длинный текст, если он разбивается на несколько строк, иметь такое же смещение слева от первой строки? Теперь под цифрами отображается вторая строка.

Вот скрипка (посмотрите на 2.3 пункта): http://jsfiddle.net/1vh1tt81/1/

мне удалось достичь желаемого результата с помощью «позицию: абсолютная» на «Ли: до того» элемента, но это вызвало другие проблемы, характерные для мой проект, так что это нехорошее решение для меня.

Был аналогичный вопрос, но в разметке был 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

Используется table макет для внутренней ol и клетки выстраиваются 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>