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方法可以做到这一点？

这是我在小提琴中的问题：https://jsfiddle.net/zquL7sem/3/

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

非常感谢任何帮助。

Answer 1

如果您使用display:table属性元素将扩展内容所需的内容，例如真实表。您可以使用table-layout:fixed和width来解决此问题。 https://jsfiddle.net/zquL7sem/4/

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

1 个答案: