防止使用隐式宽度和无空格换行的元素拉伸答案

【问题标题】：Prevent element stretching with implicit width and no whitespace wrap防止使用隐式宽度和无空格换行的元素拉伸
【发布时间】：2015-03-18 14:05:50
【问题描述】：

我有一个 HTML 页面，里面有几个 div：

div#given                -- display: block
    div#one              -- display: table
        div#two          -- display: table-row
            div#three    -- display: block
                div#four -- display: block

#given 由第三方提供，并具有明确的width 集，但该宽度可以通过 JavaScript 更改。

#one、#two、#three 和 #four 都具有隐式宽度。

#three 的样式表如下：

#three
{
    overflow-y: hidden;
}
#three:hover
{
    overflow-y: visible;
}

#four 包含大量文本，完全溢出#three，但溢出隐藏直到#three 悬停。
现在到#four 我想申请text-overflow: ellipsis;，但这似乎只有在设置white-space: nowrap; 时才有效。但是，这会将#three 和#four 都向左延伸几千像素，这绝对不是我想要的。
到目前为止，我还没有找到其他解决方案可以为#four 显式设置宽度，这（可能，但非常）非常不切实际，因为#given 的宽度不固定。

有没有非 JS 的方法可以做到这一点？

这是我的问题：https://jsfiddle.net/zquL7sem/3/

我的目标是让红色边框内的区域在蓝线处结束，并在文本结束处显示三个点，而不为#three 或#four 设置明确的宽度。

非常感谢任何帮助。

【问题讨论】：

标签： html css implicit stretch nowrap

【解决方案1】：

如果您使用display:table，属性元素将根据内容需要（例如真实表格）进行扩展。你可以用table-layout:fixed和width来解决这个问题。 https://jsfiddle.net/zquL7sem/4/

【讨论】：