layui如何让jsp表格中列中有多行和换行符时，只显示第一行，且第一行多度过长的部分将隐藏掉？

table{
   table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
   height: 30px;
   word-break:keep-all;/* 不换行 */
   white-space:nowrap;/* 不换行 */
   overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
   text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}

<div class="layui-form-item">
   <table class="layui-table" style="width: 100%">
      <thead>
         <tr>
            <th>冻结金额批次号</th>
            <th>冻结金额</th>
            <th>扣款金额</th>
            <th>扣款状态</th>
            <th>备注</th>
            <th>操作</th>
         </tr>
      </thead>
      <!--内容容器-->
      <tbody id="con"></tbody>
   </table>
</div>

<script type="text/html" id="conTemp">
 {{# layui.each(d.list, function(index, item){ }}
        <tr>

         <td>{{item.freezeBatchSn}}</td>
           <td>{{item.batchFreezeAmounts}}</td>
         <td>{{item.deductionAmounts}}</td>
         <td>
            {{#  if(item.isCancel == true){ }}
            已扣款
            {{#  }  }}
            {{#  if(item.isCancel == false){ }}
            未扣款
            {{#  }  }}
         </td>
         <td><div style="display:block; text-align: left; width:30em;height: 30px; overflow:hidden; white-space: nowrap; text-overflow:ellipsis;" title='{{item.memo}}'>{{item.memo}}</div></td>
         <td>
            {{#  if(item.isCancel == true){ }}
            {{#  }  }}
            {{#  if(item.isCancel == false){ }}
            <a href="javascript:;" onclick="recharge('{{item.distributorId}}')" class="btn btn--warning">释放冻结金额</a>
            {{#  }  }}
         </td>
      </tr>
{{# }); }}
</script>