title: Can't get CSS ellipsis to work
body: <p>I'm very new to the whole responsive web design and I'm building simple todo app to learn with angularJS. My trouble now is how can I handle text that is too long and breaks the layout. </p>
  
  <p>Here you can see how it breaks. 
  <img src="https://i.stack.imgur.com/QIqGC.png" alt="enter image description here"></p>
  
  <p><img src="https://i.stack.imgur.com/tCbW2.png" alt="enter image description here"></p>
  
  <p>The HTML&amp;CSS is now : </p>
  
  <p><em>note: This is wrapped with <code>&lt;div class="span12"&gt;</code></em></p>
  
  <pre><code>&lt;li&gt;
      &lt;div&gt;
          &lt;span class="taskshorter"&gt;{{t.TaskName}}&lt;/span&gt;
          &lt;div class="pull-right"&gt;
              &lt;span class="label label-info "&gt;{{t.EstimatedTime}}&lt;/span&gt;
              &lt;span class="label label-important"&gt;{{t.EstimatedTimeLeft}}&lt;/span&gt;
              &lt;i class="icon-chevron-right"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.taskshorter {
      overflow: hidden;
      white-space: nowrap;
      -ms-text-overflow: ellipsis;
      text-overflow: ellipsis;
      width: 20px;
      height: 1.2em;
  }
  </code></pre>
  
  <p>But it dosen't seem to work. Should I rather write javascript code to clip the text or Am I missing something that can be easily fixed? </p>
  
  <p>Also I'm using Twitter boostrap fluid layout.</p>