CODEWITHSUNDEEP
htmlcss
Jason Axelrod
Jason Axelrod

Reputation: 7805

Overflows not being respected in divs within tables?

I am programming a calendar, which can be seen here:

http://8wayrun.com/calendar/month

I have each table cell with a width: 14%. This creates the uniformity where each column is the same size. I need this 14% to remain intact.

I'm having an issue however with my overflows. If you look on that page, you can see my events as 7:00 PM - The Break Weekly, where the word "Weekly" is broken onto a second line. What I would like it to do instead is 7:00 PM - The Break.... Using an ellipsis overflow.

I have tried the following css:

.monthTable .monthMain .monthOccur
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

However, this isn't working for me. When I use that code, the white-space: nowrap is being respected, but the rest of it isn't. Its expanding the width of the table cell beyond 14%.

Is there a way to fix this without setting fixed pixel widths?

Upvotes: 1

Views: 62

Answers (3)

Jacob
Jacob

Reputation: 2154

Add table-layout: fixed; to .monthTable. This prevents the browser from adjusting the table and respects the widths you set.

Upvotes: 2

applesElmi
applesElmi

Reputation: 416

Set a width to .monthTable .monthMain .monthOccur

.monthTable .monthMain .monthOccur {
border: 1px solid rgb(50, 50, 50);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
padding: 5px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90%;
margin: 0 auto;
}

Upvotes: 1

Evgeny Lukiyanov
Evgeny Lukiyanov

Reputation: 488

Try this (add width):

.monthTable .monthMain .monthOccur {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

     width: 119px;

     border: 1px solid rgb(50, 50, 50);
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     -khtml-border-radius: 5px;
     border-radius: 5px;
     padding: 5px;
     font-size: 11px;
}

Here is what it looks now: result

Upvotes: 0

Related Questions