css - How can I have the text content of a div overflow in a HTML email template? -

i'm working on html email template , thought done until figured out gmail , other e-mail clients strip out position css property. since writing html/css email readers going stone ages i'm little bit stuck on one.

what want display score bar sort of progress bar, score text inside of it, this:

this works fine until score becomes low , score text doesn't fit inside of blue container anymore. text gets cuts off so:

and @ 0%:

please note i'm not sure why word "score" still shows in last one.

what want score text overlap red part when text long fit inside of blue container.

my code follows:

<div style="float: left;width: 70%;height: 30px;max-height: 30px;background-color: #f00;color: #fff;font-weight: bold;padding: 0px;font-size: 18px;">          <div style="float: left;width: 0%;height: 30px;max-height: 30px;margin: 0;padding: 0;background-color: #3c88a7;overflow: visible;">              <div style="padding-left: 10px; float: left;line-height: 30px;max-height: 30px;">score 0%</div>          </div>  </div>

i've tried solve table, walk same problem - there seems no cross-platform way make text overflow cell.

any ideas how solve this, works in major email clients , webmail clients?

it simple this:

<div style="margin:0;padding:0;background:blue">     <p style="width:10%;background:red;color:white;white-space: nowrap;">score: 10%</p> </div> 

not polished, @ least code-starter it's fine, guess