js/jq 自动换行（宽度不可设置时、substring()）

最新推荐文章于 2024-07-03 03:02:05 发布

原创最新推荐文章于 2024-07-03 03:02:05 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #substring #js换行

js网页常用效果同时被 2 个专栏收录

9 篇文章

订阅专栏

jquery效果

9 篇文章

订阅专栏

本文介绍了一种利用jQuery和substring方法实现表格中th元素自动换行的方法，解决了当th宽度不确定时，文字溢出的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字自动换行（宽度不可设置时）

在项目中遇到了表格但是th无法确定宽度，导致css换行属性无效，所以寻求jq解决，开始时用split()进行分割，但是效果不理想，获取的值有逗号（去不掉，有知道怎样去掉的请指教~），换行后拼接字符也比较复杂。直到查到了这个属性substring()，觉得非常之好用啊。

substring()

定义和用法

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

语法

stringObject.substr(start [, length ])

说明

如果start为负数，则start=str.length+start。
如果 length 为 0 或负数，将返回一个空字符串。
如果没有指定该参数，则子字符串将延续到stringObject的最后。

举例：
var str = “0123456789”;
alert(str.substring(0));————“0123456789”
alert(str.substring(5));————“56789”
alert(str.substring(10));———–””
alert(str.substring(12));———–””
alert(str.substring(-5));———–“0123456789”
alert(str.substring(-10));———-“0123456789”
alert(str.substring(-12));———-“0123456789”
alert(str.substring(0,5));———-“01234”
alert(str.substring(0,10));———“0123456789”
alert(str.substring(0,12));———“0123456789”
alert(str.substring(2,0));———-“01”
alert(str.substring(2,2));———-“”
alert(str.substring(2,5));———-“234”
alert(str.substring(2,12));———“23456789”
alert(str.substring(2,-2));———“01”
alert(str.substring(-1,5));———“01234”
alert(str.substring(-1,-5));——–”“

alert(str.substr(0));—————“0123456789”
alert(str.substr(5));—————“56789”
alert(str.substr(10));————–””
alert(str.substr(12));————–””
alert(str.substr(-5));————–“56789”
alert(str.substr(-10));————-“0123456789”
alert(str.substr(-12));————-“0123456789”
alert(str.substr(0,5));————-“01234”
alert(str.substr(0,10));————“0123456789”
alert(str.substr(0,12));————“0123456789”
alert(str.substr(2,0));————-“”
alert(str.substr(2,2));————-“23”
alert(str.substr(2,5));————-“23456”
alert(str.substr(2,12));————“23456789”
alert(str.substr(2,-2));————””
alert(str.substr(-1,5));————“9”
alert(str.substr(-1,-5));———–””

以下是解决方案。

实现效果图

这里写图片描述

HTML

<table  class="responsive" cellpadding="0" cellspacing="0">
<tr>
    <th width="" class="y_itemtd">项目</th>
    <th width="">费用</th>
    <th width="">啦啦啦可报销</th>
    <th width="">哦哦可报销</th>
    <th width="">点点滴滴可报销1</th>
    <th width="">去可报销2</th>
    <th width="">咦可报销</th>
    <th width="">合计</th>
</tr>
<tr>
    <td class="y_itemtd">（三分类）</td>
    <td>200</td>
    <td>50</td>
    <td> -</td>
    <td> -</td>
    <td> -</td>
    <td> -</td>
    <td> -</td>
</tr>
</table>

jq

基于jq库写的代码。

var thNum = $(".responsive th").length//获取总的th个数
for (var i = 1;i<thNum;i++){//循环th
    var thStr = $(".responsive th").eq(i).html().length;//获取每个th的字数
    var thHtml =$(".responsive th").eq(i).html();//获取th的内容

    if (thStr>3){//th字数大于3时开始执行换行动作
        var thHtml_New = thHtml.substring(0,4);//th前4个字的内容
        var thHtml_New2 = thHtml.substring(4);//获取th第4个字以后的内容
        var strNew =thHtml_New +"<br>"+thHtml_New2;//拼接加换行符
        $(".responsive th").eq(i).html(strNew);//搞定
    }
}

ok了以上就是简单的换行代码~