css - DIV 以缩写形式用省略号截断，在单击图标时展开

Question

在这个 fiddle 中，我需要将一个 DIV 截断为 250px 的初始宽度，我已经用 '...' 做了这件事；单击我自己的“？”按钮然后扩展到 500 像素:

https://jsfiddle.net/my8jpn01/16/

CSS

.truncate {
  width: 250px;
  /* need automatic multi-line height */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border:1px solid #999999;
  float: left;
  word-wrap: break-word;
}

JS

$('.helpicon').on('click', function () {
$('.truncate').css('width','500px');
$('.truncate').css('overflow','visible');
});

我的问题:

1. 扩展的 DIV 必须是多行的，可变高度。现在它溢出了，即使是自动换行。设置高度不起作用。

2. 有没有办法让'?'截断 DIV 的一部分？

3. 展开后应该有一个“隐藏”链接以恢复到原始压缩版本。

Answer 1

一个非常简单的例子。您可以通过添加/删除类来实现。为您需要的属性设置特定于类的样式。

.truncate.truncated {
    white-space: initial;
    width: 500px;
}

演示 https://jsfiddle.net/my8jpn01/19/

IE11 不喜欢 white-space 的 initial。如果适用，请使用 inherit 或使用 normal 恢复默认值。

.truncate.truncated {
    white-space: normal;
    width: 500px;
}