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

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

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

这是我在 fiddle 中遇到的问题：https://jsfiddle.net/zquL7sem/3/

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

非常感谢任何帮助。

Answer 1

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

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

Prevent element stretching with implicit width and no whitespace wrap

html

css

implicit

stretch

nowrap