Vertical text with CSS in link - html

Question

I have a really hard time getting some kind of good looking vertical text for my ribbons.
As you can see on the link
http://madbogen.com/
The first ribbon have some white text printed on the image. Is there any possible way to achieve this with CSS? Or is it enough if i just label the a-tag with a title according to what it says - I'm thinking searching etc?
I hope to achieve to same effect without using title so I can get rid of the little box coming up when hovering the ribbons.
Thanks in advance

Answer 1

You could use <br /> tags to stick them onto separate lines like so:
<div>
<span>H <br />E <br />L <br />L <br />O <br />! <br />
</span>
Demo here:
http://jsfiddle.net/QSByU/497/
Or alternatively you could wrap each letter in a span tag like so:
<h1>
<span> N </span>
<span> E </span>
<span> T </span>
<span> T </span>
<span> U </span>
<span> T </span>
<span> S </span>
</h1>
Demo here:
http://jsfiddle.net/QSByU/498/
There are lots of other methods that you can use to make text appear vertically (see http://code.tutsplus.com/tutorials/the-easiest-way-to-create-vertical-text-with-css--net-15284).

Answer 2

Thanks guys. I looked at tutsplus website and found letter-spacing and word-wrap to be what I needed.
color: white;
font-size: 16px;
word-wrap: break-word;
text-align: center;
padding-left: 15px;
padding-top: 45px;
letter-spacing: 28px;
text-decoration: none;
line-height: 105%;
font-style: normal;
font-family: "Times New Roman";