Question

我有以下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-block 来解决场景2 ，但是一旦我这样做，就会打破场景1 溢出td。另外，我尝试将 text-overflow：ellipsis 添加到表格单元格中，但它没有做任何事情。

有没有办法阻止 inline-block 元素扩展出它的容器？

我应该尝试任何不同的方法吗？

Answer 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;
}

Answer 2

that你想要的是什么吗？

<table>
    <tr>
        <td>
            <div class="long-line">
                <a>Neque porro quisquam est qui dolorem </a>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            <div class="long-line">
                <a>loream ipsum </a>
            </div>
        </td>
    </tr>
</table>

CSS

.long-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display:inline-block;
    background-color:pink;
    max-width:200px;
}
td{
    border-style:solid;
    width:200px;
}

防止内联块元素扩展到容器

2 个答案: