CODEWITHSUNDEEP
css
omzu
omzu

Reputation: 39

Fixing thumbnail overflow

I've been trying to get the overflowing text to go to a new line, to no avail. In the thumbnails section of my website, the thumbnail title is set to "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;
}

I've read that if the width of the element is set, it will automatically wrap itself.. but the thumbnail_title is already set to 280px. I changed it to max-width but nothing happened. I've also tried adding "word-wrap: break-word" (CSS3), but there was no effect. Any ideas?

Upvotes: 0

Views: 138

Answers (2)

m59
m59

Reputation: 43785

Remove white-space:nowrap; That prevents text from going to new lines.

These two selectors have nowrap and need it removed: .thumb_title and .thumb_title a

Fixing this will also change the layout. I recommend this:

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

Upvotes: 1

Yooz
Yooz

Reputation: 2518

There are few things preventing the wrap to happen.

Here the css changed :

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

But, you will have another issue with the floating statement , the next image will move right.

Upvotes: 1

Related Questions