Text not wrapping

Question

I have following structure:

html

<div class="article-list-item">
  <h3 class="overlay-title"><a href="#">TITLE TEXT GOES HERE</a></h3>
  <div class="is-video">
       <span class="video-play-icon-overlay"></span>
       <img src="image.jpg" />         
  </div>
</div>

css

.article-list-item {
    margin: 0 0 2px 0;
    position: relative;
    overflow: hidden;
}
.article-list-item h3.overlay-title {
    z-index: 600;
    display: inline;
    width: 99.9%;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0px 0 5px 10px !important;
}

Issue

The text within the link of the h3.overlay-title extends beyond the width of the a tag instead of wrapping and taking up multiple lines.

Demo

You can see it in action here: http://2be.be/ on the videoslider on top of the page. Items that have title wider that the image they're on will run behind the next slide instead of wrapping within the slide.

Answer 1

Try this:

.article-list-item h3.overlay-title
{
    white-space: normal;
    z-index: 600;
    display: inline;
    width: 99.9%;
    position: absolute;
    bottom: 0;
    margin: 0;
    padding: 0px 0 5px 10px !important;
}