高度随着“空白:nowrap"而过渡.涉及:可以使用更少的Javascript吗? [英] Transition of height with "white-space: nowrap" involved: possible with fewer Javascript?

问题描述

我有一个文本框，用省略号隐藏溢出的文本.仅可见一行.

I have a text-box that hides overflowing text with ellipsis. Only one line is visible.

我使用text-overflow和white-space: nowrap完成了此任务.元素具有固定的height值.

I accomplished this using text-overflow and white-space: nowrap. The element has a fixed height value.

点击/单击时，该框应平滑展开(即高度)以显示其余文本.

When tapped/clicked the box should smoothly expand (it's height) to show the rest of the text.

我使用CSS过渡和Javascript完成了此任务.一个隐藏的阴影"描述容器包含相同的文本，没有空格和溢出处理.它具有完整的高度.切换实际的框时，我设置了从阴影"元素读取的height值，并添加了一个将删除空白和溢出内容的类. transition: height选项使此更改更平滑.

I accomplished this using CSS transitions and Javascript. A hidden "shadow" description container contains the same text without white-space and overflow handling. It has the full height. When toggeling the actual box I set the height value read from the "shadow" element and add a class that will remove the white-space and overflow stuff. The transition: height option makes this change smooth.

我想在没有额外的Javascript逻辑且没有shadow元素的情况下执行此操作.
我想在没有

I'd like to do this without extra Javascript logic and without the shadow element.
I'd like to do this without

• 使用setTimeout()等待过渡
• 阴影元素

• using setTimeout() to wait for the transition
• the shadow element

仅删除white-space和text-overflow无效，因为它们不可转换.

Only removing white-space and text-overflow does not work because they're not transitionable.

我很好奇是否还有另一个技巧可以做到这一点.

I'm curious if there's another trick that does this.

小提琴: http://jsfiddle.net/ywQTd/(将窗口缩小到足以触发text-overflow: hidden)

Fiddle: http://jsfiddle.net/ywQTd/ (Make the window small enough to trigger 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中):

Click Handler (in jQuery on-load 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>

---

更新

最初的标题是

---

Update

The initial title was

涉及空白:nowrap"的高度转换:有没有JS的方法?

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

我对其进行了更改，因为它不够清晰.当然，没有Java脚本是不可能的，因为必须有一个执行某些操作"的点击处理程序.但是我想用更少的Java脚本 logic 归档目标，而不用在Java脚本中计时. ;)

I've changed it because it was not clear enough. Of course it's not possible without Javascript since there has to be a click handler that will do "something". But I'd like to archive the goal with fewer Javascript logic and without timing in Javascript. ;)

我已经在问题部分中阐明了第一段.

Further I've clarified the first paragraph in the Question section.

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

@jme11 kindly pointed out that my solution has some accessibility and SEO related issues. Yes, that's right, this example has these issues. But I've only extracted the relevant part of my code. Within the application both do not really matter: the page is rendered on the backend so that it works without Javascript, the shadow element is not present there. It then "progressively enhances" and completely re-renders. The "shadow element" might then still be a problem for clever search engines but I guess there's an attribute that would mark this as SEO-unrelated. The accessibility issue is a good point but I'm sure there is some ARIA attribute that mutes this element.

但是由于我还是想摆脱阴影元素，所以这不是很有趣吗?

But since I'd like to get rid of the shadow element anyway all this is not that interesting, is it?

推荐答案

问题是您无法过渡到height:auto; 尝试以下方法(我认为使用最少的JS): http://jsfiddle.net/ywQTd/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/

我的方法首先读取处于展开状态的元素的高度，然后立即将其放回收缩状态.然后，首先在每次单击时切换类别"expand"，以控制word-wrap的值，依此类推.然后通过使用$().css()设置值来设置高度的动画.
CSS:

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: 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);
    });
});

这篇关于高度随着“空白:nowrap"而过渡.涉及:可以使用更少的Javascript吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！