Css 文本未换行

我的结构如下：

html 问题 h3.overlay-title链接中的文本超出了标记的宽度，而不是环绕和占用多行

演示 你可以在这里看到它的作用：在页面顶部的视频滑块上。标题比图片宽的项目将在下一张幻灯片后面运行，而不是在幻灯片中换行。

尝试以下操作：

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

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

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