Not able to truncate text with 100% of width

Question

I know that is not possible truncate the text if I use 100% 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:

<div class="col-sm-2 hideable-sidebar" id="resource_container">
            <h4>Resource</h4>

            <div class="input-group">
                <input type="text" placeholder="search" class="form-control" >
                <span class="input-group-btn">
                    <button class="clear btn btn-default" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
                    </button>
                    </span>
            </div>

            <table border='1' id='resource-container'>
            <tr id="res-1"><td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</strong><br>test</div></td></tr>
            <tr id="res-1"><td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest</div></td></tr>
            <tr id="res-1"><td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td><td style="padding-left: 10px"><div><strong>foo</strong><br>test</div></td></tr>
            </table>
        </div>

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:

#resource-container
{
    margin-top:10px;
    width:100%;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

but this not working unfortunately. Someone could help me? Thanks.

Answer 1

Try putting the truncation styles on the element containing the text:

#resource-container {
    margin-top: 10px;
    width: 100%;
}

#resource-container td div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

---

Edit: Per feedback, now added additional styles needed for this to work in a table.

#resource-container {
  margin-top: 10px;
  width: 100%;
}
#resource-container td:nth-child(2) {
  width: 100%;
  max-width: 1px;
}
#resource-container td:nth-child(2) div {  
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="col-sm-2 hideable-sidebar" id="resource_container">
  <h4>Resource</h4>

  <div class="input-group">
    <input type="text" placeholder="search" class="form-control">
    <span class="input-group-btn">
                    <button class="clear btn btn-default" type="button">
                        <span class="glyphicon glyphicon-remove"></span>
    </button>
    </span>
  </div>

  <table border='1' id='resource-container'>
    <tr id="res-1">
      <td style="background-color:#FFCCC2" class="resource-color">&nbsp;&nbsp;</td>
      <td style="padding-left: 10px">
        <div><strong>foooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</strong>
          <br>test</div>
      </td>
    </tr>
    <tr id="res-1">
      <td style="background-color:#F41FF2" class="resource-color">&nbsp;&nbsp;</td>
      <td style="padding-left: 10px">
        <div><strong>foo</strong>
          <br>teeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeest</div>
      </td>
    </tr>
    <tr id="res-1">
      <td style="background-color:#F4CCC2" class="resource-color">&nbsp;&nbsp;</td>
      <td style="padding-left: 10px">
        <div><strong>foo</strong>
          <br>test</div>
      </td>
    </tr>
  </table>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>