使用溢出和省略号css属性限制的动画展开文本

Question

我试图在<p>text</p> html元素上的两个状态上应用动画。 这篇文章被一些css专利截断：

第一个州

 white-space: nowrap;     /* Do not go to line if text is multiline */
 width: 300px;            /* The text cannot be larger than 300px */
 overflow: hidden;        /* If it's larger than 300px => not show the rest */
 text-overflow: ellipsis; /* add '...' after the text if it is larger than 150px */

第二州

 word-wrap: break-word;   /* only force word to be one multiple line if it is larger than 300px */
 width: 300px;

那么我如何将第一个状态设置为第二个状态？ （反之亦然）

这是我将动画的代码的一部分。它可以使用角度或角度材料或纯度进行动画处理。

My Plunker for test

谢谢=）