使用子字符串时，HTML结构会破坏

Question

我有以下作为描述字段。

<div>
      <p>this is a list</p>
      <div style="color:red;">description</div>
      <ul>
           <li>one</li>
           <li>two</li>
      </ul>
</div>

现在我们有一个约束，在描述中只显示20个字符。但如果我substring提取所需的字符串，一些HTML标记会启动，但不会完成。因此，“观点”失去了它的“形式”，并破坏了父级。

我想只提取20个字符而不改变它的形式，也不会破坏父div的形式。

请参考fiddle - 这里我使用了80个字符，包括div和p标签