Display full text vertically in css - html

Question

This css displays the outlined text when I hover over the filled text.Im displaying the text vertically, but the part I'm having a problem with is the full text should display vertically and the next full text displaying vertically to the right of it and so on. But right now it displays one word of the sentence and then to the right of it the next word and so on. How can I fix this?
JS:
return (
<div className="body">
<>
<div className='X-ray'>
<span className="filled-text">
Тавтай морилно уу.
Тавтай морилно уу.
Тавтай морилно уу.
Тавтай морилно уу.
</span>
<span className="outlined-text" aria-hidden="true">
Тавтай морилно уу.
Тавтай морилно уу.
Тавтай морилно уу.
Тавтай морилно уу.
</span>
<div id="circle"></div>
</div>
</>
</div>
);
CSS:
* {
::selection {
background: none;
}
font-family: sans-serif;
letter-spacing: -5px;
cursor: grabbing;
margin: 0px;
box-sizing: border-box;
position: absolute;
}
body {
background: #3590f3;
overflow: hidden;
height: 100vh;
writing-mode: vertical-lr;
text-orientation: sideways-right;
}
span {
width: 100vw;
padding: 5rem;
font-size: 5rem;
font-weight: bold;
line-height: 4rem;
text-align: center;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
}
#media screen and (max-width: 768px) {
span {
padding: 5px;
font-size: 3rem;
line-height: 2.5rem;
}
}
span.filled-text {
color: #fff;
z-index: 0;
}
span.outlined-text {
color: transparent;
-webkit-text-stroke: 0.5px #fff;
z-index: 2;
}
#circle {
height: 200px;
width: 200px;
border-radius: 50%;
background: #3590f3;
border: 20px solid #fff;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
top: calc(50vh - 100px);
left: calc(50vw - 100px);
}
the current render
I have tried changing the font-size and padding, but to no avail.