html - 使用隐式宽度和无空格换行防止元素拉伸(stretch)

Question

我有一个 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 都向左拉伸(stretch)了几千个像素，这绝对不是我想要的。
到目前为止，我还没有找到明确设置 #four 宽度的其他解决方案，这(可能，但非常)非常不切实际，因为 #given 的宽度不固定.

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

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

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

非常感谢任何帮助。

Answer 1

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