涉及“white-space：nowrap”的高度转换：可能用更少的Javascript？
学科
我有一个文本框，用省略号隐藏溢出的文本。 只能看到一行。
我使用text-overflow和white-space: nowrap完成了这个white-space: nowrap 。 元素具有固定的height值。
点击/单击时，框应平滑地展开（它的高度）以显示文本的其余部分。
我使用CSS转换和Javascript完成了这个。 隐藏的“阴影”描述容器包含相同的文本，没有空格和溢出处理。 它有全高。 当设置实际的盒子时，我设置从“shadow”元素读取的height值，并添加一个类，它将删除空白和溢出的东西。 transition: height选项使此更改顺利进行。
题
我想在没有额外的Javascript逻辑和没有阴影元素的情况下这样做。
我想没有这样做
- 使用
setTimeout()等待转换 - 阴影元素
仅删除white-space和text-overflow不起作用，因为它们不可转换。
我很好奇是否有另一种技巧可以做到这一点。
工作代码
小提琴： 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; }
单击Handler（在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：
lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
更新
最初的头衔是
涉及“white-space：nowrap”的高度转换：是否有一种JS-less方式？
我改变了它，因为它不够清楚。 当然，没有Javascript是不可能的，因为必须有一个点击处理程序，它会做“某事”。 但我想用更少的Javascript 逻辑归档目标，而没有Javascript的时间。 ;）
此外，我已经澄清了问题部分的第一段 。
附录
@ jme11善意地指出我的解决方案有一些可访问性和SEO相关的问题。 是的，没错，这个例子有这些问题。 但我只提取了代码的相关部分。 在应用程序中，两者都不重要：页面在后端呈现，以便它在没有Javascript的情况下工作，阴影元素不存在。 然后它“逐步增强”并完全重新渲染。 对于聪明的搜索引擎来说，“影子元素”可能仍然是一个问题，但我想有一个属性会将此标记为与SEO无关。 可访问性问题是一个好点，但我确信有一些ARIA属性可以使这个元素静音。
但是，既然我想摆脱阴影元素，那么这一切都不是那么有趣，是吗？
问题是你无法转换到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); }); });
我看到了你想要完成的挑战，但是你现在的解决方案显然存在问题（我相信你知道）。 即，可访问性问题（因为“影子元素”在视觉上隐藏但不是听觉上），SEO问题（因为您复制的内容可以被列入黑名单），以及您的代码和内容本身的可读性/可维护性问题。
我推荐以下解决方案。 这里的技巧是你实际上删除了描述类，获取元素的高度，然后再添加描述类。 这一切都发生得如此之快，浏览器没有机会重新绘制，因此，用户什么也看不见（除非他们碰巧在开发人员工具中看到这个元素）。
我发现，就像你最初做的那样，在将描述类添加回来之后，在将高度传递给元素之前，这需要几毫秒的超时。 尽管如此，它感觉非常敏感，效果很好。
这是一个小提琴 。 （请注意，我将内联宽度添加到您的控件中仅用于测试，因此我不必继续使窗口变小）。
HTML：
open lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet
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参与。 尽管如此，这是一种更清晰，更易于阅读/维护的方法，可以解决当前实现中的一些问题。