Html 无法截断宽度为100%的文本

我知道如果我使用

100%

作为容器的宽度，则不可能截断文本。但我需要将此宽度应用于我的表，以便将宽度设置为搜索栏，实际上我使用的是引导，我有以下html结构：

<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>

---

但不幸的是，这并不奏效。有人能帮我吗？谢谢。

尝试将截断样式放在包含文本的元素上：

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

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

---

编辑：根据反馈，现在添加了在表中工作所需的其他样式

#资源容器{
边缘顶部：10px；
宽度：100%；
}
#资源容器td:第n个子容器（2）{
宽度：100%；
最大宽度：1px；
}
#资源容器td:n个子（2）div{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}

资源
oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

试验
foo

三三两两
foo

试验

尝试将截断样式放在包含文本的元素上：

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

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

---

编辑：根据反馈，现在添加了在表中工作所需的其他样式

#资源容器{
边缘顶部：10px；
宽度：100%；
}
#资源容器td:第n个子容器（2）{
宽度：100%；
最大宽度：1px；
}
#资源容器td:n个子（2）div{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}

资源
oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

试验
foo

三三两两
foo

试验

我无法让您的解决方案工作，您可以粘贴一个JSFIDLE吗？Thanks@AgainMe我在我的答案中添加了一个工作片段，灵感来自这里的一个答案：我无法让你的解决方案工作，你能粘贴一个JSFIDLE吗？Thanks@AgainMe我在我的答案中添加了一个工作片段，灵感来自于这里的一个答案：