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

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

在项目中遇到了表格但是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了 以上就是简单的换行代码~