HTML表格单元格控制文本长度，超出部分显示省略号

1 固定单元格宽度

这种效果采用css实现。单元格(td)的设置和块(div)有一点不同，前者不能直接设置width，要首先将表格布局（table-layout）设为固定（fixed），然后再设置单元格宽度，否则文字仍然会把单元格撑开。单元格宽度只需设置表头元素就可以作用于整列。

<style>
        /*隐藏多余文字*/
        table{
            /*将表格布局设为fixed，默认是auto*/
            table-layout: fixed;
        }
        .th_rname{
            /*自定义单元格宽度，设置表头即可作用于整列*/
            width: 400px;
        }
        .td_rname{
            /* 强制不换行 */
            white-space: nowrap;
            /* 超出部分显示省略号 */
            text-overflow: ellipsis;
            /* 隐藏超出内容 */
            overflow: hidden;
        }
    </style>

效果如下，注意第二列“线路名称”的显示效果：

2 固定字符数量

固定字符数量的效果提供两种实现方法，一是jquery，二是thymeleaf。先放出实现效果：

 

2.1 jquery实现

<script>
        $(function () {
           $("td[class='td_rname']").each(function(){
               let rname_str =  $(this).text();
               // 最大显示字符数25，超出部分显示省略号
               if(rname_str.length>25){
                  $(this).text(rname_str.substring(0, 25)+"...");
              }
           });
        });
    </script>

2.2 thymeleaf实现

实现方法比较简单，使用三目运算就可以。

<!-- title属性：鼠标悬停显示完整文字 -->
<td th:text="${#strings.length(u.rname)>25}?${#strings.substring(u.rname, 0, 25)+'...'}:${u.rname}"
    th:title="${u.rname}" class="td_rname"></td>