How to place text at the bottom when there's predefined height!

Question

This should be incredibly trivial, but it's not. I have a predefined height for an anchor, and I would like to place the text at the bottom.

<li><a class="my-text">My Text</a></li>

I used the following CSS, which does not work. The text still appears at the top.

a.my-text {
     background-color:#cccc;
     height:50px;
     vertical-align:bottom;
     width:100px;
}

The idea is: I want to align text to the bottom, but if there is text that is longer than one line, I want the over flow to go to the top, not push everything else down... any ideas of how this could be achieved?

Answer 1

This can't be done using css and the html you provide. If you put an extra span in the anchor, it can be done:

a.my-text {
  height: 50px;
  display: block;
}
a.my-text span {
  position: absolute;
  bottom: 0;
}