html多行输入以及默认显示，td中换行显示

多行输入

多行输入使用textarea，进入页面，带入默认值，需要通过js来设置
代码如下

    <div class="col-lg-6">
   <label>发现问题具体情况简述<span class="red"> * </span></label>
  <textarea maxlength="500" rows="7" class="form-control m-input  required"  name="problemDescription" id="problemDescription" oninput="TextareaFontLength()" > </textarea>
     <div style="text-align:right">
           <span id="span_Font_Length" style="font-size: 14px;">0</span>
                  <span style="font-size: 14px;">/</span>
                   <span style="font-size: 14px;">500</span>
                    </div>
           </div>

  <script type="text/javascript" th:inline="javascript">
        //TextArea 实时显示字数
        function TextareaFontLength() {
            var strTeatArea = $("[id$='problemDescription']").val().length;
            $("[id$='span_Font_Length']").text(strTeatArea);
        }
		//进入页面，带入默认值
        $(function() {
            $("[id$='problemDescription']").val($("#problemDescriptionValue").val())
            TextareaFontLength()
        });
        </script>

tb中显示多行

使用DataTable生成列表，列表项中某一项字数太多，需要点击展开显示，这样涉及到换行问题
解决办法：在显示长内容的td里面将内容放在div标签里面，给div标签加样式

style="width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;"

代码：

  columns: [
                {
                    // table index
                    "orderable": false,
                    "data": null,
                },
                {
                    "data": "registerOrgan",
                    "orderable": false,
                },

                {
                    "data": "registerDate",
                    "orderable": false,
                },
                {
                    "data": "keyPoint",
                    "orderable": false,
                },
                {
                    "data": "totalNum",
                    "orderable": false,
                },
                {
                    "data": "unitsNum",
                    "orderable": false,
                },

                {
                    "data": "problemsNum",
                    "orderable": false,
                },
                {
                    "data": "problemsRectifyNum",
                    "orderable": false,
                },
               {
                    "data": "inspectionDateStart",
                    "orderable": false,
                },
                {
                    "data": "inspectionDateEnd",
                    "orderable": false,
                },
                {
                    "orderable": false,
                    "data": null,
                    "createdCell": function (nTd, sData, oData, iRow) {
                        var html = "<a class='btn mini btn-xs blue-stripe update' data-info='" + oData + "' href='javascript:;'>编辑</a>";
                        if (!oData.logicDel) {
                            html = html + "<a class='btn mini btn-xs blue-stripe delete' data-info='" + oData + "' href='javascript:;'>删除</a>";
                        } else if (oData.logicDel) {
                            html = html + "<a class='btn mini btn-xs blue-stripe delete' data-info='" + oData + "' href='javascript:;'>恢复</a>";
                        }
                        $(nTd).html(html);
                    }
                },
                {
                    "class": 'details-control',
                    "data": null,
                    "orderable": false,
                    "defaultContent": ''
                },

  //显示隐藏信息-绑定事件,如不需要直接删掉
        table.on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            if (row.child.isShown()) {
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
        //显示隐藏信息-返回信息,如不需要直接删掉
        function format(d) {
            /*for example*/
            return '<table cellpadding="5" class="table table-bordered" cellspacing="0" border="0" style="padding-left:50px;">' +
                '<tr>'+
                '<td style="width: 20px">发现问题具体情况简述:</td>'+
                '<td><div style="width:100%;white-space:normal;word-wrap:break-word;word-break:break-all;">'+(d.problemDescription==null?"":d.problemDescription)+'</div></td>'+
                '</tr>'+
                 '</table>';
            /*for example */
        };

效果：

参考文章
完美解决table中td里面的内容自动换行