修復縮略圖溢出

我一直試圖讓溢出的文本去一個新的行，無濟於事。在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），但沒有效果。有任何想法嗎？

來源

2014-01-24 Omar

刪除white-space:nowrap;這可以防止文本進入新行。

這兩種選擇都有nowrap和需要它移除：.thumb_title和.thumb_title a

修復，這也將改變佈局。我建議這樣的：

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

來源

2014-01-24 00:31:06 m59

謝謝你的回覆。我做了你所說的話，但還有什麼我需要做的嗎？溢出的文本仍然不會進入下一行，請參閱帶有火箭圖像的縮略圖（第一列，第二列）..完整標題未顯示。 – Omar

@Omar我刪除了'nowrap'（請參閱我的回答）並顯示完整標題。然後我使用'inline-block'而不是'float'來固定你的佈局。 – m59

我很抱歉，我沒有注意到這一點。另一個愚蠢的問題：我如何增加每個縮略圖下面的垂直空間？他們彼此太靠近了。 – Omar

有幾件事情防止纏繞的情況發生。

這裏的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; 
}

但是，你將有浮動聲明的另一個問題，接下來的圖像將向右移動。

來源

2014-01-24 00:36:59 Yoann

謝謝你的回覆Yoann，我讚賞澄清:) – Omar

修復縮略圖溢出

回答

相關問題