layui数据表格文本溢出怎么办

js代码

<script src="/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 312
            , url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                { field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left' }
                , { field: 'username', title: '用户名', width: 80 }
                , { field: 'sex', title: '性别', width: 80, sort: true }
                , { field: 'city', title: '城市', width: 80 }
				, {
					field: 'sign', title: '签名', width: 177,
                    templet: function (res) {
                        return "<div class=\"tableColShow\">" + res.sign + "</div>";
                    }
				}
            ]]
        });
        var tipsVal;
        $('body').on('mouseover', '.tableColShow', function () {
            var ovText = $(this).text();
            if (ovText.length < 9) {
                return;
            }
            var html = "<p style='word-wrap:break-word;width: 150px;'>" + ovText + "</p>";
            tipsVal = layer.tips(html, this, { tips: [1, "rgb(58, 61, 73)"] });
        });
        //鼠标移出
        $('body').on('mouseout', '.tableColShow', function () {
            layer.close(tipsVal);
        });
    });
</script>

css设置样式

<style>
.tableColShow{
			max-height:28px;
			max-width:150px;
			overflow:hidden;
			text-overflow:ellipsis;
			white-space:nowrap;
		}
</style>