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.

有帮助吗?

解决方案

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;
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top