高度与“;空白:nowrap”;涉及:可能使用更少的Javascript

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

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

我发现，就像您最初所做的那样，在添加回描述类之后，在将高度传递到元素之前，这需要几毫秒的超时时间。尽管如此，它感觉反应很快，效果也很好。

这是一把小提琴。(注意，我只是为了测试而在控件中添加了内联宽度，这样我就不必一直让窗口变小(。

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:注意：我将行高：25px移动到包含元素中，这样当删除描述类时，高度仍然基于行高计算

#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。尽管如此，这是一种更干净、更易于阅读/维护的方法，可以解决当前实现中的一些问题。

问题是无法转换到height:auto;请尝试以下操作(在我看来，使用尽可能少的JS(：http://jsfiddle.net/ywQTd/2/

我的方法首先读取处于展开状态的元素的高度，然后立即将其放回收缩状态。然后，每次点击时，首先会切换类"expand"，它控制word-wrap等的值。然后，通过设置$().css()的值来设置高度动画。
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;
        text-align: center;
    }
    #description {
        transition: height 0.5s ease;
    }
    #description.expand {
        overflow: hidden;
        text-overflow: initial;
        white-space: normal;            
    }

JQuery代码：

$(document).ready(function(){
    var $el = $('#description'), 
        height = $el.outerHeight() + 'px', //get height in expanded state
        i=0, //initialize toggle variable
        initheight = 25 + 'px'; //sets the initial height
    $el.removeClass('expand').css('height', initheight);
    $("a").on("click", function(){
        //toggles the expand class, then sets height to either the height in
        //expanded state or 25 px (i++%2) acts as a toggle expresssion
        //(returns 25 at first click, height at second, 25 at third and so on)
        $el.toggleClass('expand').css('height', (i++%2) ? initheight : height);
    });
});