html - 防止内联块元素扩展到容器外部

我有以下html：

<td>
    <div class="long-line">
        <a>Some text</a>
    </div>
</td>

和css：

.long-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

我有两种情况，我可以解决其中一种，但不能同时解决两种。
场景1）div不应该扩展到td之外，所有额外的文本都用省略号隔开。目前这是可行的。
场景2）如果不需要，div不应该填充td。换言之，如果有少量的文本，它不会占用任何不需要的额外空间。
我可以通过在类中添加display:inline块来解决场景2，但是一旦我这样做了，它就会溢出td来破坏场景1。此外，我还尝试向表单元格中添加文本溢出：省略号，但它不会执行任何操作。
是否有方法防止内联块元素从其容器中展开？
我应该试试别的方法吗？

最佳答案

Live demo
HTML。

<table>
    <tr>
        <td>
            <div class="td">
                <div class="wrapper">
                    hello world!
                </div>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="td">
                <div class="wrapper">
                    hello world! hello world!
                </div>
            </div>
        </td>
    </tr>
</table>

CSS

.wrapper {
    display: inline;
    background-color: red;

}

.td {
    width: 100px;
    background-color: green;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

关于html - 防止内联块元素扩展到容器外部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31844988/