Creating vertical text in html without one line blank gap w/ <br>?

HTML-CSS
1

Hello, I am trying to create this effect in HTML:

H
E
L
L
O

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.

2

What you’ve got works fine:

Are you doing anything with the CSS?

1 Like
3

I set the line-height to 1.5 in css to fix it. I am not sure why it was doing default 2 despite me not having line-height anywhere in my css.

Thanks :smiley:

1 Like