Question

我一直试图让溢出的文字转到新的一行，但无济于事。在thumbnails section of my website中，缩略图标题设置为“overflow：hidden”：

.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 */
}

Answer 2

阻止包裹发生的事情很少。

这里的css发生了变化：

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

但是，浮动语句会有另一个问题，下一个图像会向右移动。

修复缩略图溢出

2 个答案: