Handling overflow

[graud]

Hi all,
On this page's main slider and the 6-story box beneath, there are some issues handling overflow. Varying heights of headlines and images make text cut off on the bottom of their containers.

Ideally, I would like no text to be cut off and for there to be an ellipsis (...) at the point where the text is cut off.

Is this possible? Thank you for your help.

[Excavator]

Hello graud,
I prefer not to set heights on elements and allow them to expand to contain what you put in them.
Like this -

.homecontent_02 .info2 {
    background: none repeat scroll 0 0 #FFFFFF;
    border-right: 4px solid #FFFFFF;
    display: inline-block;
    float: left;
    /*height: 90px;*/
    margin: 0 1px 0 0;
    overflow: hidden;
    padding: 0 10px 10px;
    width: 320px;
}
.homecontent_02 .holder p {
    font-size: 11px;
    /*height: 52px;*/
    line-height: 18px;
    margin: 2px 0 0;
    overflow: hidden;
    padding: 0 2px !important;
}

[LearningCoder]

Yea I noticed that when I declare heights on elements, when you zoom out of the browser and/or different resolutions, you will notice a paragraph for instance will 'overflow' your div/container. Just give the desired padding to the bottom of the element and delete the height.

Regards,

LC.

[graud]

Thanks for your quick responses.
My problem is that the paragraph elements (eg. in div class "feature_info" in the main carousel) print much more text than is shown and the bottom of the "feature_list" container cuts the text.

I can't seem to remove the height from "feature_list". When I add the padding to "feature_list", this still happens, space is just added between the cut text and the bottom of the container, as you can see in the attachment.

Is there anything that can be done about this?

[Excavator]

Originally Posted by graud

Is there anything that can be done about this?

Maybe like this -

div#feature_list {
    /*height: 390px;
    overflow: hidden;*/
    position: relative;
    width: 474px;
}

[graud]

If you try this in Firefox or Chrome Developer Tools, when you remove the height, the entire container and all of the content is erased. So it looks like I need to keep the height declaration. Nothing happens when I remove the overflow:hidden; statement.

Thanks

[graud]

Bump. Anyone have any ideas on stopping the text from getting sliced at the bottom of the container?

As per above, removing the height line in div#feature_list removes the whole carousel.

See page here.