我有以下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/

10-11 11:11