title: Not able to truncate text with 100% of width
body: <p>I know that is not possible truncate the text if I use <code>100%</code> as width of container. But I need to apply this width to my table for set the width as the search bar, actually I'm using Bootstrap and I've this html structure:</p>
  
  <pre><code>&lt;div class="col-sm-2 hideable-sidebar" id="resource_container"&gt;
              &lt;h4&gt;Resource&lt;/h4&gt;
  
              &lt;div class="input-group"&gt;
                  &lt;input type="text" placeholder="search" class="form-control" &gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;button class="clear btn btn-default" type="button"&gt;
                          &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
                      &lt;/button&gt;
                      &lt;/span&gt;
              &lt;/div&gt;
  
              &lt;table border='1' id='resource-container'&gt;
              &lt;tr id="res-1"&gt;&lt;td style="background-color:#FFCCC2" class="resource-color"&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;&lt;td style="padding-left: 10px"&gt;&lt;div&gt;&lt;strong&gt;foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo&lt;/strong&gt;&lt;br&gt;test&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr id="res-1"&gt;&lt;td style="background-color:#F41FF2" class="resource-color"&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;&lt;td style="padding-left: 10px"&gt;&lt;div&gt;&lt;strong&gt;foo&lt;/strong&gt;&lt;br&gt;teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr id="res-1"&gt;&lt;td style="background-color:#F4CCC2" class="resource-color"&gt;&amp;nbsp;&amp;nbsp;&lt;/td&gt;&lt;td style="padding-left: 10px"&gt;&lt;div&gt;&lt;strong&gt;foo&lt;/strong&gt;&lt;br&gt;test&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>how you can see the text is too long and go out of the table. I tried to fix this situation with css like this:</p>
  
  <pre><code>#resource-container
  {
      margin-top:10px;
      width:100%;
  
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  </code></pre>
  
  <p>but this not working unfortunately. Someone could help me? Thanks.</p>