根据文本大小，使用动画展开元素和合约元素

Question

包含的代码段几乎完成了我想要做的所有事情。

点击＆＃39;切换展开＆＃39;看到元素扩展到更大的尺寸，然后收缩到更小的尺寸。

我有几个问题：

1. 如何在仍然用文本填充元素的同时收缩元素（在动画结束之前不将文本缩减为两行）？
2. 是否可以实现所有功能而无需在我设置的CSS中设置精确的宽度和高度？风格变化目前很脆弱。
3. 是否可以为这些框设置动画并让文字“动画”。还有？例如随着框大小的增加，看文本重新包装

谢谢！

＆＃13;
＆＃13;
$('#expand-link a').on('click', function(event) {
  var $sections = $('.block');
  if ($sections.data('expanded')) {
    $sections.find('li').each(function() {
      $(this).css('height', this.scrollHeight);
    });
    $sections.removeClass('expanded');
    $sections.find('li').each(function() {
      $(this).css('height', $(this).find('p:not(.fullview)').outerHeight() + 32);
    });
    $sections.removeClass('expandit');
    $sections.data('expanded', false);
  } else {
    $sections.find('li').each(function() {
      $(this).css('height', this.scrollHeight);
    });
    $sections.addClass('expanded');
    $sections.find('li').each(function() {
      $(this).css('height', this.scrollHeight);
    });
    $sections.addClass('expandit');
    $sections.data('expanded', true);
  }
});
＆＃13;
li {
  list-style: none;
  background-color: white;
  padding: 5px 5px 5px 5px;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: height 1s ease-in-out;
  overflow-x: hidden;
  overflow-y: hidden;
}
.expanded li {
  width: 570px;
}
li:first-child {
  margin-top: 0px;
}
li:last-child {
  margin-bottom: 0px;
}
.section p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
}
.expanded .section p {
  overflow: auto;
  display: block;
}
ul {
  padding: 5px 5px 5px 5px;
  margin: 5px 5px 5px 5px;
  overflow: hidden;
}
.section p.fullview {
  display: none;
}
.expanded .section p.fullview {
  display: block;
}
.block {
  background-color: grey;
  display: inline-block;
  width: 300px;
  transition: width 1s ease-in-out;
}
.block.expandit {
  width: 600px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="expand-link">
  <a href="#">Toggle expanded</a>
</div>

<div class="block">
  <ul class="sections">
    <li class="section">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis massa mauris. Fusce vel efficitur elit. Curabitur finibus sagittis nisl. Nullam luctus, magna sed feugiat scelerisque, nunc sem facilisis enim, sed ornare nulla urna sit amet
        lectus. Praesent facilisis efficitur ipsum sed gravida. Mauris mollis ut nisi at fringilla. Aenean et orci libero. Curabitur pharetra odio ornare metus pharetra aliquet. Nunc nisl lorem, tempus vitae libero a, feugiat viverra dui.</p>
      <p class="fullview">Some extra content</p>
      <p class="fullview">A bit more</p>
    </li>
    <li class="section">
      <p>Some different less useful text</p>
      <p class="fullview">A bit of extra content for your information</p>
    </li>
  </ul>
</div>
＆＃13;
＆＃13;
＆＃13;