title: How can I truncate the text to better fit available space
body: <p>here is some sample code <a href="http://jsfiddle.net/XpLSZ/2/" rel="nofollow">http://jsfiddle.net/XpLSZ/2/</a> </p>
  
  <pre><code>&lt;div class="main"&gt;
      &lt;div class="item "&gt;
          &lt;img class ="icon" src="https://www.google.com/s2/favicons?domain=http://planet.clojure.in"/&gt;
          &lt;span class="title" &gt;This is a test Long title&lt;/span&gt;
          &lt;span class="count" &gt;(22)&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .main{
     border-style: solid;
      border-width: medium;
      width:200px;
  }
  .icon{
      width:12px;
      height:12px;
  }
  .truncate {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>What I want is to have a row with icon.title and count and have the title truncate instead of wrapping, is this possible with css ? (I do not want count to be truncated)
  Now I do some truncation in JS but the problem is that layout is different in some browsers and also it brakes on some  zoom levels. </p>