Need your help in displaying this array vertically:

.vericaltext {
  display: inline-block;
  margin-right: 6px;
  background-color: #EEE;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

<h1 class='vericaltext'>{[1,2,3,4,5,6,7,8,9,10]}</h1>

What it does is display the last index not the way I need:

I need the array to be displayed like this:

1
2
3
4
5
6
7
8
9
10

and not like this :

1
2
3
4
5
6
7
8
9
1
0 

Anyone got an idea how to solve this issue?

CodePudding user response：

What about pre tag?

<pre style="text-align:right;width:50px">
1
2
3
4
5
6
7
8
9
10
</pre>

CodePudding user response：

I am just using flex to align the elements vertically (each element is inside a span) and then inserting it into the div.

const myDiv = document.getElementsByClassName('vericaltext')[0];
[1,2,3,4,5,6,7,8,9,10].map(ele=>{
  const mySpan= document.createElement('span');
  const textNode = document.createTextNode(ele);
  mySpan.appendChild(textNode);
  myDiv.appendChild(mySpan);
});

.vericaltext {
  display: inline-flex;
  flex-direction:column;
  margin-right: 6px;
  background-color: #EEE;
 
}

<h1 class='vericaltext'></h1>