To generate the text, I made it easier for myself and created this JS code.

$(function() {
// so i can declare the function and run the code when the page is loaded up
// shorthand of $(doucument).ready(function(){ code });
function createVerticalText(text) {
// incoming text as parameter
let verticalText = ['<p>'];
// the array that will be containing the html code. Needs to be inside pargraph tag
text = text.split("")
// so i can loop through it ⇳
for (var i =0; i < text.length; i++) {
verticalText.push(text[i]+`<br>`)
// pushing br to break the line and put each letter on own line
}
verticalText.push('</p>')
return verticalText.join("")
// join the arrya and return with closing p tag.
}
console.log(createVerticalText(`Advertisement Goes Here!`))
});

You can see I use <br> and add it to each character.

verticalText.push(text[i]+`<br>`)

The outputted effect is:

H
E
L
L
O

Why is this? How can I make the line break in HTML without creating a new blank line? The JS code isn’t the result of the problem (only a helpful tool) so I am posting this in the HTML/ CSS section.