Website Text overlay issue

HTML & CSS
1

Hello everyone,

Last time i posted on here i was in college and since then i have scored myself a superb opportunity in a company - Inforgen!
Im now an apprentice so im finding it very interesting and its a steep learning curve! Anyway more to the point… my issue;

im trying to stop text overlaying the box it is placed in with text-overlay:ellipsis but am having no luck… ( note that the example given dosnt have overlapping text but if you add more inline text by the F12 or other plugins you use you will - you will see what i mean )

The text in context here is the text in the “you might also like…” and “Explore similar items” elements located down near the footer of the page.

this is what happens when to much text is added - click here for image

Link to the page in discussion

Iv tried playing about with the CSS but if one of the elements work, the other one is out of line or messed up in some way … ( they have different boundaries but share the same CSS )

here is a screenshot of what im trying to achieve - Click here for image

Greatly appreciated your help!
Many thanks

2

Hi,

The single line overflow is easy to manage and can be done like this:


.productTitle span {
display:block;
overflow:hidden;
text-overflow:ellipsis;
width:160px;
height:auto;
white-space:nowrap;
}

A multi line overflow with ellipsis is not so easy though as only opera has a support for a -o-ellipsis-lastline and webkit has some [URL=“http://dropshado.ws/post/1015351370/webkit-line-clamp”]proprietary code also.

There are some complicated CSS solutions around though but you will need to follow the article for full details.

It may be just easier to hide the overflow in a multi line situation.

e.g.



.productTitle a{
height:40px;
overflow:hidden;
display:block;
}
3

sitting here thinking why i hadn’t already done this!

Many thanks!