文字没有包装

Question

我有以下结构：

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;
}

问题

h3.overlay-title链接中的文本超出了标记的宽度，而不是包裹和占用多行。

演示

您可以在此处看到它：http://2be.be/位于页面顶部的视频屏幕上。标题较宽的项目将在下一张幻灯片后面运行而不是在幻灯片中包装。

Answer 1

试试这个：

.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;
}