Transition Of Height With "white-space: Nowrap" Involved: Possible With Fewer Javascript?

Subject I have a text-box that hides overflowing text with ellipsis. Only one line is visible. I accomplished this using text-overflow and white-space: nowrap. The element has a fi

Solution 1:

I see the challenge with what you're trying to accomplish, but there are clearly issues (as I'm sure you know) with your current solution. Namely, accessibility problems (because the "shadow element" is hidden visually but not aurally), SEO issues (because you're duplicating content you can get blacklisted), as well as readability/maintainably issues with your code and the content itself.

I recommend the following solution. The trick here is that you actually remove the description class, get the height of the element and then add the description class back. This all happens so quickly, there's no chance for the browser to repaint, and therefore, the user sees nothing (unless they happen to be watching that element in the developer tools).

I found that, much like you've done initially, this requires a couple of milliseconds in a timeout before passing the height into the element after adding the description class back. Nonetheless, it feels very responsive and it works well.

Here's a fiddle. (note that I added the inline width to your control just for testing so I didn't have to keep making the window small).

HTML:

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

CSS:NOTE: I moved the line-height: 25px into the containing element so that when the description class is removed the height is still calculated based on the 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: 010px;
    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);
        }
    });
});

I realize this isn't really answering your question: is there a JS-less way. The answer is really no, not that I can think of with your implementation or to produce the exact results you want. Plus, AFAIK, you'd have to have a click handler no matter what, so in that regard, you have to have JS involved. Nonetheless, this is a cleaner, easier to read/maintain approach that solves some of the issue with your current implementation.

Solution 2:

The problem is that you cannot do a transition to height:auto; Try the following (uses the least amount of JS possible, to my opinion): http://jsfiddle.net/ywQTd/2/

My approach at first reads the height of the element in expanded state and then immediately puts it back to shrinked state. Then on each click at first the class "expand" is toggled, which controls the values for word-wrap and so on. And then the height is animated by setting a value with $().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: 010px;

        line-height: 25px;

        text-align: center;
    }

    #description {
        transition: height 0.5s ease;
    }

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

JQuery Code:

$(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);
    });
});