A response to https://gist.github.com/phuu/cd24356bb7ec54a8ec1a

css.css

.container {
  font-family: helvetica, sans-serif;
  padding-right:30px; /* Same padding as the img required */
}

.item {
  display: inline-block;
  text-align:left;
  padding-right:30px; /* Same padding as the img required */
  background:url(  "http://www.lorempixel.com/30/30") no-repeat center right; /* set img as background & position */
}

/* Or you could use :before for the same effect */
/*
.item:before {
    position: absolute;
    right: 0;
    content:' ';
    width:30px;
    height:30px;
    background-color:red;
}
*/

.ellipsis {
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;                  
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

index.html

<div class="outer">
  <div class="container">
    <div class="item ellipsis">A really long long long long long long long long piece of text</div>
  </div>
</div>