css - 修复缩略图溢出

Question

我一直试图让溢出的文本换行，但无济于事。在thumbnails section of my website ，缩略图标题设置为“溢出:隐藏”:

.thumb_title a {
    color:#333333;
    line-height:18px;
    overflow:hidden;
    text-decoration:none;
    white-space:nowrap;
}

.index .thumb_title a:hover {
    background:none;
    text-decoration:underline;
}

.thumb_title {
    overflow:hidden;
    padding-top:2px;
    white-space:nowrap;
    width:280px;
    font-size:11px;
    font-weight:bold;
}

我读到如果设置了元素的宽度，它会自动换行..但是 thumbnail_title 已经设置为 280px。我将其更改为最大宽度但没有任何反应。我也试过添加“word-wrap: break-word”(CSS3)，但没有效果。有什么想法吗？

Answer 1

删除 white-space:nowrap; 以防止文本换行。

这两个选择器有 nowrap 并且需要将其删除:.thumb_title 和 .thumb_title a

解决这个问题也会改变布局。我推荐这个:

.index .module {
  display: inline-block;
  vertical-align: top;
  /* remove float: left */
}