0

我有一个 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/

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

很感谢任何形式的帮助。

4

1 回答 1

1

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

于 2015-03-18T14:15:55.360 回答