隐藏了溢出的不正常形状的文本区域不起作用

Question

我已经找到了从此处（Unusual shape of a textarea?）制作非矩形文字的方法，它的工作原理就像是一种魅力。

我需要将其限制为2行，因此我使用了overflow: hidden;，但是该区域以某种方式恢复为矩形。

这是我的html代码。

.descTitle {
  height: 20px;
  width: 70px;
  float: left;
  border: none;
}

.descContent {
  height: 40px;
  line-height: 20px;
  /*overflow: hidden; /* This breaks the form*/
}

.descOut {
  height: 40px;
  width: 100%;
}

<tr>
  <td colspan=1>
    <div class='descOut'>
      <div class='descTitle'>
        <label for='txt9'><b>Description: </b></label>
      </div>
      <div class='descContent' contenteditable='true' style='font-color:black; font-size: 11px; font-family:arial'/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
      </div>
  </td>
</tr>

当我注释掉溢出行时，效果很好，但是在使用时却以某种方式破坏了表格。

有人可以帮助我找出如何将内容限制为2行而又不破坏不规则形状的文本区域吗？