Embedded overflow:hidden only partially working - html

Question

Problem: In one type of embedded styling "overflow:hidden" is working fine, and in another type of embedded styling it does not.
Here is the CSSDesk code (jsfiddle is not working as of this writing).
Background: In my project I have to use HUGE tables to show variables coming from a db - up to 75 variables per page. I tried my best using divs alone, but I wasted 20 hours and ultimately, I went back to tables (For you CSS purists, I apologize).
In some of my td's the data is a bit long, and needs to be "hidden" (it doesn't matter in this particular case because the data is just a "preview"). I've searched the web, and did an experiment in which the only styling element that could use "hidden" is a div (I tried tds and spans in an experiment and they don't work).
In one td, I'd like to put one variable on the left, and another on the right - most of the time, both will fit into the td, but on a very long variable it's OK to chop off part of the right variable. So, I write the CSS and html, and style the divs so that they meet my criteria - those are the upper two tds on the CSSDesk page noted above. Everything works fine.
BUT! Over the last few months I've learned that it's possible to "mix" multiple styles in the "class" part of the element identifier (e.g. <td class="redcolor blueunderline">) and I've found that on many occasions it is VERY convenient to use "little additions" on an element that is the only one on a page, and you'd have to rewrite/add a whole embedded style or change the style sheet (e.g. Name, address, phone number, zip and you only want to "bold" the name - class="identifers" vs class="identifiers bold") - I wonder if you experts ever do something like that?
So I played a bit and got most of it working EXCEPT for the "overflow:hidden".
For the upper left div in the CSSDesk example I use this CSS and html (it works great):
.leftdivclass {
float:left;
background-color:green;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<td><div class="leftdivclass" >Upper Left 123456789</div>
For the upper right div in the CSSDesk example I use this CSS and html (it works great):
.rightdivclass {
float:right;
background-color:red;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<div class="rightdivclass" >Upper Right 123456789</div></td>
For the lower left div in the CSSDesk example I use this CSS and html (everything works but the "hidden" - note the numbers sticking out)
.floatleft {
float:left;}
.bgblue {
background-color:blue;}
.bgred {
background-color:red;}
.lcwhite {
color:white;}
.lcblack {
color:black;}
.border2y {
border:2px solid yellow;}
overflowhidden {
overflow:hidden;}
.wsnowrap {
white-space:nowrap;}
.width25pc {
width:25%;}
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div>
But if I use the same html and add "style="overflow:hidden" everything works fine, like in the lower right example of the CSSDesk example.
<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td>
Questions:
Why would a single embedded css style containing "overflow:hidden" work, yet when it is parsed out to a single addition to a class command it doesn't work? And why would it work if I added "style="overflow:hidden" - inline?
Do you experts ever use little "class snippets" like this?
Again, I thank you in advance.

Answer 1

You can mix and match these classes. If it saves redundancy, great. If it confuses classes and container classes (i.e. the parents they are inside of) then it gets kind of hard to debug your problem.
Most likely it's not working because either its parent or another class is conflicted with the overflow property. Inline styles like style="overflow:hidden;" almost always get prioritized the highest, but remember that overflow has a default property of visible.
If you call 2 classes, one having overflow:hidden; and the other overflow:visible;, then there's a chance that you won't get your desired effect.
Keep in mind, too, that a selector like this
#divid .divclass
will always win over
.divclass
and will be treated with greater priority.
Also, have you tried
overflow:hidden !important;
which tends to take precedence over everything. Hope that helps.