Automatic Text-Ellipsis with accompanying Image

An element with dynamic width contains a random length text and an image, that's directly right of the text. When the container's size is to small to display all the text, it's automatically clipped with a text ellipsis.

by Dini Mer

HTML

<div class="container clearfix" style="">
    <div class="text">Lorem ipsum dolor sit amet</div>
    <img class="img" src="http://lorempixel.com/30/20"></img>
</div>
<div class="container clearfix" style="">
    <div class="text">Consectetur adipisicing elit quis beatae ducimus quibusdam</div>
    <img class="img" src="http://placekitten.com/30/20"></img>
</div>
<div class="container clearfix" style="">
    <div class="text">Natus quae doloribus numquam quas sunt quibusdam culpa tempore possimus perferendis dignissimos dolores ea odio sed nihil iure saepe nobis</div>
    <img class="img" src="http://placehold.it/30x20"></img>
</div>

CSS

/* v NOT NECESSARY STYLES FOR OPTICAL BEAUTIFICATION */
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
body { font-family: 'Lato', sans-serif; letter-spacing: 1px; } 
.container {
    background: wheat;
    padding: 8px;
    margin: 10px;
}
/* ^ NOT NECESSARY STYLES FOR OPTICAL BEAUTIFICATION */

/* v COMMON HELPER STYLES */
* { box-sizing: border-box; }
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; }
.clearfix:after { clear: both; }
/* ^ COMMON HELPER STYLES */

.text {
    float: left;
    width:auto;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-right: 40px; /* COMPUTED WIDTH OF IMAGE INCL. PADDING/BORDER/MARGIN */
    margin-right: -40px; /* COMPUTED NEG. WIDTH OF IMAGE INCL. PADDING/BORDER/MARGIN */
}
.img {
    float: left;
    padding-left: 10px;
}

JavaScript

/** 
Solution to Question:
http://stackoverflow.com/questions/17996461/css-trick-for-maximum-inline-image-indentation/
**/