HTML CSS列表樣式更改

Question

我想在代碼中使用清單以獲得以下輸出-

[1]. This is my line one
[2]. This is my line two
[3]. this is my line three, which is very very long and is not justified when used under list. 

我用下面的代碼。 但是沒有用

<ol list-style-type: [decimal];>
<li>This is my line one</li>
<li>This is my line two</li>
<li>this is my line three, which is very very long and is not justified when used under list.</li>
</ol>

我是html和CSS編碼的新手！ 我現在面臨的問題是，當我使用這種風格時，長句子不能用單個數字來說明。 這是現在的樣子：image.ibb.co/e8Nfda/image.png如何調整線條？

Answer 1

根據您的要求進行了更新：

 ol { list-style: none; counter-reset:array;} ol li{text-indent: -2em;} ol li:before { counter-increment:array; content:"[" counter(array) "]. "; } 

  <ol> <li>This is my line one This is my line one This is my line one This is my line one This is my line one This is my line one</li> <li>This is my line two</li> <li>this is my line three</li> </ol> 

Answer 2

試試這個CSS jsfiddle

ol { list-style: none; 
counter-reset:array;}
ol li:before {
counter-increment:array;
content:"[" counter(array) "] ";
}