javascript - 涉及 "white-space: nowrap"的高度转换: possible with fewer Javascript?

Question

主题

我有一个文本框，用省略号 overflow hidden 的文本。只有一行是可见的。

我使用 text-overflow 和 white-space: nowrap 完成了这项工作。该元素具有固定的 height 值。

点击/单击时，框应平滑扩展(高度)以显示其余文本。

我使用 CSS 转换和 Javascript 完成了这项工作。一个隐藏的“影子”描述容器包含没有空白和溢出处理的相同文本。它具有完整的高度。切换实际框时，我设置了从“阴影”元素读取的 height 值，并添加了一个将删除空白和溢出内容的类。 transition: height 选项使这种变化变得平滑。

问题

我想在没有额外的 Javascript 逻辑和影子元素的情况下执行此操作。
我想在没有

的情况下做到这一点

• 使用setTimeout() 等待转换
• 影子元素

仅删除 white-space 和 text-overflow 不起作用，因为它们不可转换。

我很好奇是否还有其他技巧可以做到这一点。

工作代码

fiddle :http://jsfiddle.net/ywQTd/ (使窗口足够小以触发 text-overflow: hidden)

CSS:

#control {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: rgba(0,0,0, 0.05);
}

.description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(0,0,0, 0.2);
    color: rgb(255,255,255);
    padding: 0 10px;

    line-height: 25px;
    transition: height 0.5s ease;

    text-align: center;
}

#description {
    height: 25px;
}

#description.expand {
    overflow: hidden;
    text-overflow: initial;
    white-space: normal;
}

#shadow-description {
    position: absolute;
    top: -10000px;

    text-overflow: initial;
    overflow: visible;
    white-space: normal;
}

点击处理程序(在 jQuery 中加载 Fn):

$("...").on("click", function(){
    var h = $("#shadow-description").height(),
        $el = $("#description");

    if ($el.hasClass("expand")) {
        $el.css({height: ""});

        setTimeout(function(){
            $el.removeClass("expand");
        }, 200);
    } else {
        $el.css({height: h + "px"}).addClass("expand");

    }

});

HTML:

<div id="control">
    <div id="description" class="description">lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
    <div id="shadow-description" class="description">lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
</div>

---

更新

最初的标题是

Transition of height with "white-space: nowrap" involved: is there a JS-less way?

因为不够清楚，所以改了。当然，没有 Javascript 是不可能的，因为必须有一个点击处理程序来做“某事”。但我想用更少的 Javascript 逻辑 和没有 Javascript 计时的方式来实现目标。 ;)

此外，我已经澄清了问题部分中的第一段。

---

附录

@jme11 友善地指出我的解决方案存在一些可访问性和 SEO 相关的问题。是的，没错，这个例子就有这些问题。但我只提取了代码的相关部分。在应用程序中，两者都无关紧要:页面在后端呈现，因此无需 Javascript 即可工作，影子元素不存在。然后它“逐步增强”并完全重新渲染。 “影子元素”可能仍然是聪明的搜索引擎的问题，但我猜有一个属性会将其标记为与 SEO 无关。可访问性问题是一个很好的观点，但我确信有一些 ARIA 属性可以使该元素静音。

但是因为无论如何我都想摆脱阴影元素，所有这些都不是那么有趣，是吗？

Answer 1

我看到了您试图完成的挑战，但您当前的解决方案显然存在问题(我相信您知道)。即，可访问性问题(因为“影子元素”在视觉上是隐藏的，但在听觉上是隐藏的)、SEO 问题(因为你复制的内容可能会被列入黑名单)，以及代码和内容本身的可读性/可维护性问题。

我推荐以下解决方案。这里的技巧是您实际上删除了描述类，获取元素的高度，然后将描述类添加回来。这一切发生得如此之快，浏览器没有机会重新绘制，因此用户什么也看不到(除非他们碰巧在开发者工具中观察该元素)。

我发现，就像您最初所做的一样，这需要几毫秒的超时时间，然后才能在添加回描述类后将高度传递到元素中。尽管如此，它感觉非常灵敏并且效果很好。

这是一个 fiddle . (请注意，我将行内宽度添加到您的控件中只是为了测试，因此我不必一直使窗口变小)。

HTML:

<a href="javascript: void(0);">open</a>
<div id="control">
    <div id="description" class="description">lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
</div>

CSS: 注意:我将 line-height: 25px 移动到包含元素中，这样当描述类被删除时，高度仍然根据 line-height 计算。

#control {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 25px;
    background-color: rgba(0,0,0, 0.05);
}

.description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: rgba(0,0,0, 0.2);
    color: rgb(255,255,255);
    padding: 0 10px;
    height: 25px;
    transition: height .5s ease;
    text-align: center;
}

.description.expand {
    overflow: hidden;
    text-overflow: initial;
    white-space: normal;
}

JS:

$(function(){
    $("a").on("click", function(){
        $el = $("#description");      
        if ($el.hasClass("expand")) {
            $el.css({height: ""});

            setTimeout(function(){
                $el.removeClass("expand");
            }, 200);
        } else {

            $el.removeClass("description");
            var h = $el.css("height");
            $el.addClass("description");
            setTimeout(function(){
                $el.addClass("expand").css("height", h);
            }, 200);
        }
    });
});

我意识到这并没有真正回答您的问题:是否有一种无 JS 的方式。答案真的是否定的，不是我能想到的用你的实现或者产生你想要的确切结果。另外，AFAIK，无论如何你都必须有一个点击处理程序，所以在这方面，你必须有 JS 参与。尽管如此，这是一种更简洁、更易于阅读/维护的方法，可以解决您当前实现中的一些问题。