Truncate a string with the remaining space
<p>I have a list where each li element contains two div inside one div "main" :</p>

<ul>
<li><p>div "main" has a fixed width (saying 200px),</p></li>
<li><p>div "part1" has a variable width (that of text and image that contains)</p></li>
</ul>

<p>=> I wish text inside div "part2" had as width that of div "main" less div "part1" (the remaining space)</p>

<p>EX:</p>

<pre><code>...
&lt;li&gt;
   &lt;div class="main"&gt;   
          &lt;div class="part1"&gt;A&lt;/div&gt;
          &lt;div class="part2"&gt;BlaBlaBla&lt;/div&gt;
   &lt;/div&gt;   
&lt;/li&gt;
&lt;li&gt;
   &lt;div class="main"&gt;   
          &lt;div class="part1"&gt;ABC&lt;/div&gt;
          &lt;div class="part2"&gt;BlaBlaBla&lt;/div&gt;
   &lt;/div&gt;   
&lt;/li&gt;
&lt;li&gt;
   &lt;div class="main"&gt;   
          &lt;div class="part1"&gt;ABCDE&lt;/div&gt;
          &lt;div class="part2"&gt;BlaBlaBla&lt;/div&gt;
   &lt;/div&gt;   
&lt;/li&gt;
...
</code></pre>

<p>It should display:</p>

<pre><code>A BlaBla...
ABC BlaB...
ABCDE Bl...
</code></pre>

<p>I tried but it doesn't work :</p>

<pre><code>$(function(){
  $(".part1").each(function(){
    var $this = $(this);
    var $len = 0;
    var $len = $this.outerWidth();
    var $lenParent =$this.parent().outerWidth();        
    var newText2 = $this.next('.part2').text().substring(0,$lenParent-$len); 
    $this.next('.part2').innerHtml(newText2+"...");
  });
});
</code></pre>
